[문제해결] ESLint error 'React' must be in scope when using JS

리액트 18.3.1 버전에서 ESLint에서

'React' must be in scope when using JS

라는 린트 오류가 뜬다.

찾아보니 React 17 버전 이후로는 JSX를 사용할 때 React를 import하지 않아도 된다고 한다.

---

React 17 릴리즈 JSX Transform [ JSX Transform 문서 ]

🕵️ Introducing the New JSX Transform

JSX 변환은 무엇인가요?

브라우저는 JSX를 바로 이해하지 못하므로 대부분의 React 사용자는 Babel이나 TypeScript와 같은 컴파일러를 사용하여 JSX 코드를 일반 JavaScript로 변환합니다 . Create React App이나 Next.js와 같은 많은 사전 구성된 툴킷에도 JSX 변환이 후드 아래에 포함되어 있습니다.

React 17 릴리스와 함께 JSX 변환을 몇 가지 개선하고 싶었지만 기존 설정을 깨고 싶지 않았습니다. 이것이 업그레이드를 원하는 사람들을 위해 JSX 변환의 새롭고 재작성된 버전을 제공하기 위해 Babel과 협력한 이유입니다.

새로운 변형으로 업그레이드하는 것은 완전히 선택 사항이지만 몇 가지 이점이 있습니다.

새로운 변환을 사용하면 React를 가져오지 않고도 JSX를 사용할 수 있습니다 .
설정에 따라 컴파일된 출력으로 인해 번들 크기가 약간 개선 될 수 있습니다 .
이를 통해 향후 React를 배우는 데 필요한 개념의 수가 줄어들어 개선이 이루어질 수 있습니다 .
이 업그레이드는 JSX 구문을 변경하지 않으며 필요하지 않습니다. 이전 JSX 변환은 평소처럼 계속 작동하며, 이에 대한 지원을 제거할 계획은 없습니다.

React 17 RC에는 이미 새로운 변형에 대한 지원이 포함되어 있으므로, 시도해 보세요! 채택하기 쉽게 하기 위해 React 16.14.0, React 15.7.0, React 0.14.10에 대한 지원도 백포트했습니다 . 아래에서 다양한 도구에 대한 업그레이드 지침을 찾을 수 있습니다.

---

17버전 이전

React 17 이전에는 JSX를 사용할 때 React를 import해야 했습니다. 이는 Babel이 JSX를 React.createElement 호출로 변환할 때 React가 필요했기 때문입니다.

import React from 'react';

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

export default App;

Babel이 이 코드를 다음과 같이 변환했습니다

import React from 'react';

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

export default App;

---

17버전 이후

React 17 이후로는 새로운 JSX 변환이 도입되어, React를 import하지 않아도 JSX를 사용할 수 있게 되었습니다. Babel이 새로운 변환을 사용하여 JSX를 처리할 때, React를 import할 필요가 없습니다.

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

export default App;

아래와 같이 React를 import 하지 않아도 babel이 변환해준다.

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

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

export default App;

따라서 React17 버전인데 ESLint는 기본 설정으로 react/react-in-jsx-scope 규칙을 적용하여 JSX를 사용할 때 React가 스코프에 있어야 한다고 경고한다. 이 문제를 해결하려면 ESLint 설정에서 이 규칙을 비활성화해야 한다.

---

eslint.config.js 파일

export default [
	{
      ...
      rules: {
        ...
          "react/react-in-jsx-scope": "off",
        ...
      }
      ...
	}
]

---