리액트 17버전 이상부터 React를 import 하지 않아도 되는 이유

JSX Transform은 무엇인가?

브라우저는 JSX를 알아듣지 못하기 때문에
대부분의 리액트 사용자는 바벨 또는
타입스크립트와 같은 컴파일러에 의존하여 JSX 코드를 일반 자바스크립트로 변환합니다.
CRA 또는 Next.js와 같은 사전 구성된 많은 설정에는
JSX Transform도 포함되어 있습니다.

JSX Transform의 달라진 점은?

JSX를 사용할 때, 브라우저가 리액트 함수를 이해하도록 컴파일러가 transform 해줍니다.
이전 JSX Transform은 JSX를 React.createElement(...)호출로 변경였습니다.

import React from 'react';

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

이전 JSX버전에서 JS로 변경하는 것은 아래와 같습니다.

import React from 'react';

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

그러나 위의 방법은 아래와 같은 이유로 완벽하지 않았습니다.

• JSX는 React.createElement로 컴파일되었기 때문에
  JSX를 사용하는 경우 React가 범위 내에 있어야한다.

위의 문제를 해결하기 위해 React 17은 바벨 및 타입스크립트와 같은
컴파일러에서만 사용하도록 리액트 패키지에 두 개의 새로운 진입점을 도입했습니다.
JSX를 React.createElement로 변환하는 대신 새로운 JSX Transform은
React 패키지의 새 진입점에서 특수 기능을 자동으로 가져와 호출합니다.

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

새로운 JSX는 아래와 같이 변형합니다.

// 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'});
}

이제 더이상 JSX를 사용하기 위해 React를 가져올 필요가 없습니다.
이 변경 사항은 기존의 모든 JSX 코드와 완벽하게 호환되며,
구성 요소를 변경할 필요가 없습니다.

리액트 17버전 이상으로 마이그레이션 후 import React를 제거하는 방법

새로운 JSX TransForm은 react/jsx-runtime 함수를 자동으로 가져오기 때문에
JSX를 사용할 때 React는 더이상 범위 내에 있을 필요가 없습니다.
이로인해 코드에서 사용되지 않는 React 가져오기가 발생할 수 있는데
문제가 되지는 않지만, 제거하고싶다면 codemod 스크립트를 실행하여
자동으로 제거하는 것이 좋습니다.

cd your_project
npx react-codemod update-react-imports

참고한 문서

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html