[react] react 17 new jax transform

react 17부터 jax transfrom 방식이 바뀌어서 react import 없이 사용 가능.

 

new jax tranfrom으로 바꾼다면, 

 - import React 없이 코딩 가능

 - bundle size가 살짝 감소

 - 추후 react 배울 때 몇가지 개념들을 몰라도 된다.

 

 

old jax transfrom 한계점

 - JSX가 React.createElement로 컴파일 되기 때문에 React가 scope안에 항상 있어야 함.

 - React.createElement 떄문에 몇몇의 성능 향상과 간결성을 해결 못함

 

 

our code

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

 

 

old transform

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

 

 

new transform

// Inserted by a compiler (don't import it yourself!)
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#manual-babel-setup

Introducing the New JSX Transform – React Blog