10강 JSX의 정의와 역할 질문

Question

선생님ㅜㅜ 강의잘보고있습니다.. 정말 설명 너무잘하시는 것 같아요 귀에 쏙쏙들어와요   10강 JSX의 정의와 역할 2분 54초에 JSX코드를 자바스크립트로 변환하는 역할을 하는 것이 React에 createElement라고 하시는데 React.creatElement( type, [props], [...children] ) React.creatElement는 jsx를 사용하지 않고 만드는 방법아닌가요?   그렇다면 createElement는 html/XML 코드를 자바스크립트로 변환하는 역할을 하는 건가요?

Inje Lee (소플) · Answer

안녕하세요, 소플입니다. 아무래도 제 설명이 약간 오해의 소지가 있을 수 있을 것 같네요~ 강의에서 제가 전달하려고 의도한 내용은, 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   감사합니다.