🐱 #2. React.js - JSX

오늘은 JSX에서 배울 것 이다. 이전에 배웠던 아래의 문법을 더 쉽게 쓰는 방법이다.

        const h3 = React.createElement("h3", {
            id : "title",
            onMouseEnter:() => console.log("mouseenter")
        }, 
            "Hello i'm a span"
            );

우선 JSX 방식으로 다시 코딩하면 아래와 같다. 화살표 함수를 써서 작성한다.

 const Title = () => (
            <h3 id="title" onMouseEnter={() => console.log("mouseenter")}>
                Hello i'm a title
            </h3>
        );

하지만 위와 같이 작성하면 에러가 뜨는 것을 볼 수 있다.

에러가 뜨는 이유는 컴퓨터가 JSX 문법을 읽지 못하는 것이다.

위와 같이 JSX 문법을 변환해서 컴퓨터가 읽게 해줘야한다. 이것을 변환하는 Babel JS파일을 임포트 시키고 script type을 지정하면 된다. 어떻게 지정하는지 보자

아래와 같이 babel.js를 임포트 시키고 script에 type="text/babel"을 지정해준다.

그리고 기존에 불러올 때 아래와 같은 방법을 썼다면 JSX 문법은

const container = React.createElement("div", null, [h3, btn])

        ReactDOM.render(container, root);

아래와 같다.

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

주의점은 컴포넌트의 첫 글자는 반드시 대문자여야 한다.

JSX 문법을 쓰면 좀더 간결하게 코딩할 수 있다. 리액트 만세