2. JSX 컴파일

이 전의 글에서도 이야기했듯이 JSX 코드는 브라우저에서 직접 인식되지 않는다. 표준 JavaScript로 변환해야 하는데, 변환하는 도구 중의 하나가 Babel 이다. 그러면 JSX가 JavaScript로 어떻게 변환되는지 알아보도록 하자.

Babel 에서 테스트 해보기

1. Babel 접속하기

2. Try it out -> PRESETS -> react 체크

3. OPTIONS -> React Runtime 의 Classic 과 Automatic 에서 선택

Babel 변환기에서 JSX 파일에 /* @jsx blablabla /*' 주석을 추가하면, React.createElement 대신 blablabla 를 사용하게 된다. 즉, React.createElement 가 아닌 React.blablabla 로 변환된다.

---

<p>Hello, world!</p>

// React Runtime - Classic 선택
// JSX 파일
/*#__PURE__*/React.createElement("p", null, "Hello, world!");

Classic 을 선택한 경우 React.createElement 으로 변환되는 확인할 수 있다.

// React Runtime - Automatic 선택
import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("p", {
  children: "Hello, world!"
});

Automatic 을 선택한 경우 _jsx 로 변환되는 것을 확인할 수 있다. _jsx 는 JSX Runtime 이 사용하는 함수이다.

---

JSX가 어떻게 변환되는지에 대한 샘플

• Babel 변환기 하단의 Add Plugin 버튼을 클릭

• @babel/plugin-transform-react-jsx 선택

<Greeting name='world' />

/*#__PURE__*/React.createElement(Greeting, {
  name: "world"
});

Greeting 이 문자열이 그대로 들어가는 것을 확인할 수 있다. 즉, Greeting 코드는 아래와 같은데, 함수가 그대로 createElement 함수의 인자로 들어간다. 이것이 가능한 것은 JavaScript 가 1급 함수이기 때문이다.

function Greeting({name}) {
  return (
    <p>Hello, {name}!</p>
  )
}

<Greeting name='world' />

그 외 샘플 (/#__PURE__ 주석은 제거 하였음)

// JSX
<Button type="submit">Send</Button>

// 변환된 코드
/*#__PURE__*/React.createElement(Button, {
  type: "submit"
}, "Send");

// JSX
<div className="test">
  <p>Hello, world!</p>
  <Button type="submit">Send</Button>
</div>

// 변환된 코드
React.createElement("div", {
    className: "test"
  },
  React.createElement("p", null, "Hello, world!"),
  React.createElement(Button, {type: "submit"}, "Send")
);

// JSX
<div>
  <p>Count: {count}!</p>
  <button
    type="button"
    onClick={() => setCount(count + 1)}>Increase
  </button>
</div>

// 변환된 코드
React.createElement("div", null,
  React.createElement("p", null, "Count: ", count, "!"),
  React.createElement(
    "button",
    {type: "button", onClick: () => setCount(count + 1)}, "Increase")
);