React를 import 하지 않아도 되는 이유

오늘 리액트에 대해서 하나 배운 것 공유합니다.
리액트 버전 17 이전에는 항상

import React from 'react';

를 써줘야했습니다.
그래서 항상 컴포넌트가 아래와 같은 초기 세팅을 가져야했습니다.

import React from 'react';

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

브라우저는 JSX를 이해하지 못하므로 JSX코드는 자바스크립트 코드로 컴파일될 필요가 있는데 create-react-app으로 리액트 프로젝트를 세팅할경우 Babel을 이용하여 바닐라 자바스크립트로 JSX코드를 컴파일합니다.

브라우저가 이해할 수 있도록 위 컴포넌트 코드는 아래 코드로 컴파일되는 듯 싶습니다.

import React from 'react';

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

그런데 리액트 팀이 리액트 버전을 17로 업데이트한 사항중에 리액트의 성능 개선을 위한 코드들이 있는데 React.createElement()를 사용하면 성능 개선을 시키는데 문제가 있었나 봅니다. 그래서 하는 수 없이 JSX코드를 컴파일할때 위 코드를 사용하지 않기위해서

import {jsx as _jsx} from 'react/jsx-runtime'; // 컴파일러가 코드 처리시 자동으로 삽입

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

로 컴파일되게 해서

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

이렇게 간단하게 함수 컴포넌트만 써줘도 정상 작동이 가능해진듯 싶습니다!
출처는 리액트 공식문서입니다.

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