리액트
[React] 'React' must be in scope when using JSX 오류 해결하기
2023. 2. 19. 19:19
반응형
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",
...
}
...
}
반응형
'IT > Develop' 카테고리의 다른 글
[ Bazel ] Windows 환경에서 설치하기 | bazelisk (0) | 2024.07.13 |
---|---|
[React] React에서 <a> 태그 사용 오류 해결 방법 (0) | 2023.02.07 |
[Javascript] 변수선언 var, let, const ? (0) | 2023.02.06 |
[Algorithm] Merge Sort (합병 정렬) (0) | 2022.12.09 |
[Nodejs] Nodejs 설치와 버전 관리, 개발용 의존성 설치 방법 (0) | 2022.04.28 |