JSX, HTML태그와 비슷한 React문법

React를 이용해서 React.createElement() 안에 3가지 인자를 기억하는 것은 너무 불편합니다.

그렇기에 JSX를 통해 HTML태그와 비슷한 문법으로 React를 사용할 수 있는 방법을 알아보도록 하겠습니다.

JSX를 브라우저가 인식할 수 있도록 cdn을 통해 babel을 넣어줍니다.

그런 뒤, script의 텍스트 타입을 babel로 바꿔줍니다.

<script type="text/babel">
        const root = document.getElementById("root")
        const Title = (<h3 id="title" onMouseEnter={() => console.log("Mouse Entered")}>Hello I'm a title</h3>);

이렇게 설정을 해주면 JSX문법을 사용할 준비가 끝났습니다.

createElement를 이용해 3가지 인자를 넣는 과정은 babel이 알아서 해주게 됩니다.

Title 안에 들어간 값은 HTML태그와 굉장히 유사합니다. 단, Event Listner를 넣어주기 위해 중괄호{}를 사용해준다는 차이가 존재합니다.

style의 경우 기존 html태그에서도 중괄호를 사용해주니 두 번 감싸주게 됩니다.

const Button = (<button style={{ backgroundColor: "tomato" }} onClick={() => console.log("I'm Clicked")}>Click me</button>)

이렇게 Button도 만들어주고, JSX 변수들을 똑같이 div의 content 위치에 리스트 형식으로 넣어줄 수 도 있지만 새로운 방식을 사용해보도록 하겠습니다.

Title과 Button을 함수의 형태로 만듭니다.

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

const Button = () => (<button style={{ backgroundColor: "tomato" }} onClick={() => console.log("I'm Clicked")}>Click me</button>)

이렇게 함수형태로 만들어주면 이 함수들을 다른 변수에서 사용할 수 있게 됩니다.

const div = <div> <Title /> <Button /> </div>

함수로 설정해 준 값들은 이렇게 태그 형식으로 다른 JSX 변수 안에 사용할 수 있습니다.

그럼 div 사이에 Title과 Button이 제대로 들어가는 것을 확인하실 수 있습니다.

<정리>

1. JSX로 태그 만들때는 HTML 태그와 비슷하게 작성하지만 property는 중괄호로 묶어준다.

2. JSX로 만든 태그를 다른 JSX태그 안에 넣어주기 위해서는 함수로 만들어 준 뒤 태그형식으로 집어넣어준다.

3. JSX로 만든 함수태그와 실제 태그를 구분하기 위해 함수태그는 첫 글자를 대문자로 만들어준다.

4. 이렇게 만들어 준 JSX 함수태그를 컴포넌트라고 부른다.

마지막으로 root에 Rendering 해줄 Container 역시 컴포넌트로 만들어 줄 수 있다.

그리고 render안에 ReactDOM.render(, root) 로 사용이 가능하다.

이건 여러분들이 직접 해보시기를!!