JSX에 관하여

React.createElement라는걸 들어본 적 있을까.? 없는 것 같다. 모두들 JSX를 사용하고 있기에 쓰지 않는 문법인데,

예시를 들어서 알아보자.

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

//JSX방식
const Title = () => (
	<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    		Hello I'm a title
    	</h3>
)

위와 아래와 같은 뜻이다. JSX를 쓰면, 아래처럼 쉽고 간단하게 작성할 수 있다. 하지만, JSX로만 쓰면 에러가 나는데 JSX를 위의 코드로 변환시켜주는걸 Babel이라고 한다. 즉, 브라우저가 이해할 수 있는 녀석으로 바꿔주는 역할을 한다.

 

사용할 때도

const container = React.createElement("div", null, [Title])
ReactDOM.render(container, root);

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

이런 식으로, 컴포넌트를 태그처럼 사용해서 간단하게 사용가능하다. ㄱ그리고 항상 대문자로 사용해준다.