인프런 커뮤니티 질문&답변

안녕하세요, 소플입니다.

아무래도 제 설명이 약간 오해의 소지가 있을 수 있을 것 같네요~

강의에서 제가 전달하려고 의도한 내용은,

JSX로 작성된 코드를 최종적으로 JavaScript 객체 형태로 만들어주는 것이 바로 React.createElement() 함수라는 것이었습니다.

이 때 생성된 JavaScript 객체가 바로 React Element인 것이죠.

그리고 실제로 JSX로 작성한 코드를 React.createElement()를 사용하도록 변환해주는 것은,

Babel이라는 JavaScript compiler가 해주는 역할입니다.

Babel의 수많은 플러그인 중 JSX를 JS로 변환해주는 것을,

일반적으로 JSX Transform이라고 부릅니다.

그래서 정리해보면 아래와 같은 순서를 거쳐서 React Element가 생성된다고 보시면 됩니다.

JSX 코드 => Babel(JSX Transform) => JS 코드(React.createElement() 사용) => React Element

하지만 이 방식은 JSX를 변환하기 위해서 React의 createElement()에 의존해야만 했었고,

그 과정에서 createElement()로 인해 성능을 향상시키지 못하는 문제가 있었습니다.

(과거 JSX Transform 참고: https://www.npmjs.com/package/babel-plugin-transform-react-jsx#react)

그래서 성능을 향상시키기 위해서 현재 리액트에서는 아래와 같은 형태로 JSX Transform이 별도로 분리되었고, Babel에서는 이것을 이용하여 JSX를 JS로 변환하게 됩니다.

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

관련해서 혹시 더 자세한 내용이 궁금하시면 아래 링크를 참고하시면 도움이 되실 것 같습니다!

https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-different-in-the-new-transform

감사합니다.