[React.js] JSX문법 사용 시 Babel의 역할

JSX 코드 => React엔진이 이해하지 못 함.

JSX 코드 => Babel 번역 => React엔진이 이해할 수 있게 번역됨.

 

JSX 코드는 대다수의 리액트 개발자들이 사용하는 코드 작성 법으로

리액트 코드를 HTML코드처럼 짤 수 있게 해준다.

아래의 JSX 코드와 Babel 번역 코드를 보면

JSX 문법이 React.createElement와 같은 방식으로 변환된 것을 알 수 있다.

// JSX 코드

const Title = (
  <h3
    id="title"
    onMouseEnter={() => {
      console.log("mouse enter");
    }}
  >
    Hello I'm a title
  </h3>
);
const Button = (
  <button
    id="button"
    style={{ backgroundColor: "tomato" }}
    onClick={() => {
      console.log("click button");
    }}
  >
    Click me
  </button>
);

// Babel 번역 코드
"use strict";

const Title = /*#__PURE__*/React.createElement("h3", {
  id: "title",
  onMouseEnter: () => {
    console.log("mouse enter");
  }
}, "Hello I'm a title");
const Button = /*#__PURE__*/React.createElement("button", {
  id: "button",
  style: {
    backgroundColor: "tomato"
  },
  onClick: () => {
    console.log("click button");
  }
}, "Click me");