[React] React 기본

 

꺄 드디어 React 공부한다!

역시 시작은 노마드 코더 리액트 클론 코딩으로 한다! 

 

 

 

노마드코더 React 초급 강의에선 이전에 유튜버 코딩애플님께서 React 설치하는 법과는 다른 방법으로 React를 설치하길래 따라해본다.

 

1. react, react-dom import

    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

 

2. JSX import

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

이 세 개의 스크립트를 import 했는데도 JSX 문법이 먹히지 않아서 왜 그런가 했는데... 

 

작성한 문법을 감싼 script 태그에 type =" text/babel "을 추가해 줘야 한다고 한다. 

 

 

3. script 속성 type ="text.babel" 추가

 

    <script type="text/babel">
        const root = document.getElementById('root');
        const title = (<h3>React practice!</h3>);
        const button = (<button
            style = {{
                backgroundColor: "#FFEDFD",
            }}
            onClick = {() => console.log('click button!')}
        >Click me!</button>);

        const container = React.createElement('div', null, [title, button]);
        ReactDOM.render(container, root);
    </script>

 

 

출력 확인!

 

 

 

html 요소도 onClick 이벤트 출력도 모두 잘된다~

 

 

4. 컴포넌트 형식

const root = document.getElementById('root');
const Title = () => (
    <h3>React practice!</h3>
);
const Button = () => (<button
    style = {{
        backgroundColor: "#FFEDFD",
    }}
    onClick = {() => console.log('click button!')}
>Click me!</button>);

const Container = <div> <Title /> <Button /></div>;
ReactDOM.render(Container, root);

 

화살표 함수 형식으로 컴포넌트를 만들고, html 태그와 유사한 방식으로 사용할 수 있다.

왜 사람들이 react를 쓰고싶어했는지 알 것 같다... ㅋㅋㅋㅋ

 

컴포넌트의 첫글자는 html 태그와 혼동하지 않도록 대문자로 써야한다!