import React from 'react'는 꼭 써야하는가?

프로젝트를 하다가 vscode 익스텐션인 Reactjs code snippets의 기능중 하나인 rsc를 사용하면 기본적인 컴포넌트를 생성한다.
생성하게되면 항상 사용하지도 않는 import React from 'react 가 있어 꼭 필요한 것인지 궁금해서 찾아보았다.

사용하는 이유는 리액트에서만 사용하는 JSX 문법을 위한 것이다.

JSX

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return <h1>Hello World!</h1>
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

JSX -> JS

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return React.createElemet("h1",null,"Hello World");
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

리액트 17버전부터는 새로운 JSX Transform이 생겨서 import React를 해주지 않아도 JSX문법을 사용할 수 있기 때문에 최상위 루트를 제외한 하위 루트에서는 React를 꼭 import 해주지 않아도 컴파일시 알아서 인식을 한다고 한다.
index.js 같은 최상위 루트에서 이미 strictmode를 사용하기 위해 React를 import 해주고 있기 때문에 하위 루트에서는 사용하지 않아도 된다는 것이다

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이렇게 생략하게 되면 미세하게나마 번들사이즈를 줄일 수 있고 사용하지 않는 코드는 기본적으로 지워주는 게 원칙이기 때문에 최상위 컴포넌트를 제외한 하위 컴포넌트에 React가 import 되어있다면 한번 정리를 해주는 것도 좋은 것 같다.