[React] 'React' must be in scope when using JSX 오류 해결하기

---

ESLint는 위키백과에 따르면 자바스크립트 코드 상에서 발견되는 문제 패턴을 식별하기 위한 도구입니다. 개인적으로 작업하는 프로젝트야 사실 본인만 알아볼 수 있다면 큰 문제가 되지 않겠지만 한 프로젝트를 공동 작업할 경우 공통된 규칙으로 작성해야 협업에 수월할 것입니다. ESLint는 현행 ECMA스크립트 표준을 지원해 코드 품질과 코딩 스타일을 일관성있게 구성할 수 있도록 돕습니다.

 

 

ESLint는 VSCode 사용자의 경우 Extension을 통해 간편하게 설치, 사용할 수 있습니다. 혹은 원하는 프로젝트에만 설치, 적용하는 방법도 있습니다.

 

적용을 원하는 프로젝트 터미널에서 ESLint를 설치해줍니다.

 

설치 
- npm 사용
$ npm install eslint

- yarn 사용
$ yarn add eslint

 

설치가 완료되면 npx를 통해 해당 프로젝트에서 ESLint를 초기화해줍니다. 초기화가 완료되면 해당 프로젝트에 .eslintrc.js 파일이 생성됩니다.

 

npx eslint --init

 

ESLint 초기화 과정에서 문법 검사만 진행할 것인지부터 프로젝트 내에 TypeScript가 사용되는지 등에 대한 질문이 나오고 응답하면 완료됩니다. 이제 ESLint 적용을 원하는 프로젝트 폴더 내에서 npx eslint 파일명.js 를 입력하면 ESLint가 검사해줍니다. 

 

---

 

React 17버전 이후로 Import React from 'react'; 없이도 문제없이 코드를 작성할 수 있습니다만 ESLint는 별도의 설정없이는 이 React Import를 오류로 잡아냅니다. 이렇게요.

 

 

오류를 해결하기 위해 일일이 Import React from 'react'; 해주는 방법도 해결방법..이긴 하겠지만 ESLint 규칙에서 이 부분을 꺼버리는 것도 방법이 되겠습니다.

 

위의 과정대로 생성한 .eslintrc.js 파일 내에 rules 아래에 다음과 같이 입력해주면 됩니다.

 

module.exports = { 
...

    "rules": {
      ...
    	"react/react-in-jsx-scope": "off",
      ...
    }

...
}