왜 React 최신 버전에서는 import React가 필요 없을까?

📌 과거에는 import React가 필수였다

React를 공부하다 보면 예전 강의나 코드에서 import React from "react"; 구문을 흔히 볼 수 있다. 이는 기존 React 버전에서는 JSX 문법을 사용할 때 React가 필요했기 때문이다.

JSX(JavaScript XML)는 JavaScript 안에서 HTML과 유사한 문법을 사용할 수 있도록 해주지만, 실제로는 React.createElement를 호출하는 코드로 변환된다. 예를 들어,

const element = <h1>Hello, world!</h1>;

위 코드는 Babel을 통해 다음과 같이 변환되는 것이다.

const element = React.createElement("h1", null, "Hello, world!");

이 과정에서 React.createElement를 사용하기 때문에 React를 반드시 import해야 했다.

 

🚀 최신 React에서는 import React가 필요 없는 이유

React 17부터는 새로운 JSX Transform이 도입되면서 import React from "react";를 명시적으로 하지 않아도 JSX가 동작하도록 변경되었다고 한다.

기존에는 JSX가 React.createElement를 직접 호출했지만, 새로운 JSX Transform에서는 자동으로 React를 import하는 방식으로 변경되었다. 이를 가능하게 해주는 것은 새로운 JSX 변환 방식 때문이다.

예를 들어, 아래와 같은 코드가 있다고 가정하면:

const element = <h1>Hello, world!</h1>;

React 17 이상에서는 Babel이 이를 다음과 같이 변환한다.

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

const element = _jsx("h1", { children: "Hello, world!" });

즉, react/jsx-runtime을 통해 JSX 변환이 이루어지므로 import React from "react";를 직접 작성할 필요가 없어진 것이다.

 

🎯 그래도 import React를 해야 할 때는?

React 17 이상에서는 일반적인 JSX 코드에서 import React를 생략할 수 있지만, 몇 가지 경우에는 여전히 필요할 수 있다.

1. React 16 이하를 사용하는 프로젝트: 기존 방식에서는 JSX를 변환할 때 React.createElement가 필요했으므로 React 16 이하를 사용한다면 import React가 필수
2. React API를 직접 사용할 때: useState, useEffect 등과 같은 React Hook을 사용할 때는 여전히 import React from "react";가 필요
3. JSX Transform을 지원하지 않는 환경: 만약 Babel이 새로운 JSX Transform을 적용하지 않도록 설정되어 있다면 기존 방식이 유지

 

관련 문서

https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154

7.9.0 Released: Smaller preset-env output, Typescript 3.8 support and a new JSX transform · Babel

https://github.com/facebook/react/blob/main/CHANGELOG.md#1700-october-20-2020

react/CHANGELOG.md at main · facebook/react