‘eslint-plugin-react’ 설정에서 React 버전을 지정해야 하는 이유
React 18.2.0 위에 ESLint를 실행하는 동안 “Warning: React version not specified in eslint-plugin-react settings” 경고 메시지가 나타나면 걱정하지 마세요. 이 블로그 포스트에서는 이 경고가 나타나는 이유를 설명하고 이를 해결하기 위한 다양한 해결책을 제시합니다.
경고 메시지 이해하기
이 경고 메시지는 ESLint에 의해 트리거되며 eslint-plugin-react 패키지의 구성과 관련이 있습니다. 이 플러그인은 React 프로젝트에서 모범 사례를 강제하고 코드 품질을 유지하기 위해 널리 사용됩니다. 설정에서 React 버전을 지정함으로써 플러그인은 해당 버전에 특화된 보다 정확한 linting 규칙을 제공할 수 있습니다.
React 버전이 지정되지 않은 경우, eslint-plugin-react 패키지는 더 오래된 React 버전을 사용중이라고 가정합니다. 다른 버전이나 React 18.2.0과 같은 최신 버전을 사용하는 경우, ESLint는 현재 React 버전과 일치하지 않을 수 있는 linting 규칙을 알려주기 위해 이 경고를 생성합니다.
경고 해결책
해결책 1: React 버전을 ESLint 구성에 추가하기
경고를 해결하는 가장 간단한 방법은 React 버전을 ESLint 구성에 추가하는 것입니다. 프로젝트의 루트에 일반적으로 위치한 “.eslintrc.js” 파일을 열고 “settings” 섹션을 다음과 같이 업데이트합니다:
module.exports = {
settings: {
react: {
version: "detect",
},
},
};
이 구성은 ESLint에게 프로젝트에서 사용되는 React 버전을 자동으로 감지하도록 지시합니다. 파일을 저장하고 ESLint를 다시 실행하여 경고 메시지가 사라지는지 확인합니다.
해결책 2: Package.json에서 React 버전 지정하기
ESLint 구성 파일을 직접 수정하는 것을 선호하지 않는다면, 대신 “package.json” 파일에서 React 버전을 지정할 수 있습니다. “package.json” 파일을 열고 “eslintConfig” 섹션을 다음과 같이 업데이트합니다:
{
"eslintConfig": {
"settings": {
"react": {
"version": "detect"
}
}
}
}
파일을 저장하고 ESLint를 다시 실행합니다. 이제 경고 메시지가 표시되지 않아야 합니다.
해결책 3: eslint-plugin-react 다운그레이드하기
위의 해결책들이 작동하지 않거나 구버전의 eslint-plugin-react 패키지를 계속 사용하기를 원한다면, 패키지를 다운그레이드할 수 있습니다. 프로젝트의 “package.json” 파일에서 “eslint-plugin-react” 종속성을 다음과 같이 버전 “7.30.0”으로 업데이트합니다:
{
"devDependencies": {
"eslint-plugin-react": "7.30.0"
}
}
파일을 저장하고 npm install 명령을 실행하여 npm 패키지를 다시 설치합니다. 설치가 완료되면, ESLint를 다시 실행하면 경고가 해결됩니다.
결론
React 프로젝트에서 ESLint를 실행하는 동안 “Warning: React version not specified in eslint-plugin-react settings” 메시지를 만났을 때, 해당 React 버전을 ESLint 구성에 추가하거나 package.json 파일에서 지정하거나 필요한 경우 eslint-plugin-react 패키지를 다운그레이드함으로써 이 경고를 쉽게 해결할 수 있습니다. 이러한 해결책 중 하나를 따르면, 사용 중인 React 버전과 일치하는 linting 규칙을 적용하여 더 나은 코드 품질과 모범 사례 준수를 보장할 수 있습니다.
