import React from ‘react’.. 이제는 왜 안붙여도 될까 ?

[yunseorim1116]

React에서

import React from 'react';

구문을 더 이상 사용하지 않아도 되는 이유는 최신 버전의 React에서는 JSX를 사용하는 데에 React를 명시적으로 import할 필요가 없어졌기 때문입니다.

React 17이전의 방식은 JSX를 React.createElement로 변환하는 것이었습니다.
하지만 이 방식은 크게 두 가지 문제가 있었습니다.

1. React를 참조하기 때문에 작성하는 코드에 import React from ‘react’ 구문이 반드시 있어야 합니다.
2. 성능과 기술부채 등 많은 제약이 있습니다. (이에 대해서는 관련 RFC문서 소개 부분에서 다룬다.)

React 17 이후 부터는 JSX를 react/jsx-runtime의 jsx함수로 변환합니다. 더불어, 개발자가 직접 react/jsx-runtime참조를 명시할 필요 없이, 빌드시점에 babel이 inject하는 방식으로 변경되었습니다.

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

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

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

소스코드: so-so.dev 님 블로그에서 긁어왔습니다.

따라서, 최신 버전에서는 JSX를 사용할 때 import React 없이도 문제가 발생하지 않습니다. 다만 React 16 이하의 버전에서는 여전히 import React를 사용해야 합니다.