[리액트 오류] 'React' is defined but never used.eslintno-unused-vars - eslint 오류

리액트를 사용할 때 아래와 같이 React를 import해오면 오류가 뜨게된다.

eslint에서 오류를 보여주는 것인데

jsx로 처리되는 변수들은 shadowing이 되서 eslint가 못찾아 낸다고 한다.

 

 

해결방법

1. 주석처리로 하는 방법

에러나는 줄 옆에 다음과 같은 주석을 단다.

 

// eslint-disable-line no-unused-vars

 

나는 이 방법을 일일이 적기에는 너무 귀찮다고 생각했다.

 

2. eslintrc.cjs 파일에 아래와 같은 코드 추가

 

나는 현재 vite를 이용해서 react를 설치해서  eslintrc.cjs에 아래 코드를 추가했다.

처음에 구글링했을 때 

./eslintrc에 해라

.eslintrc.json 에 해라.

등등 

각각의 방법이 있었지만 다 다른 것 같다.

 

나는 이 파일에서 아래 코드를 추가했다.

{
    "rules": {
        "no-unused-vars": [
            "error",
            {
                "varsIgnorePattern": "React"
            }
        ]
    ]
}

 

아래 링크에서 해결방법을 찾아보았다. 

링크에서 보니 각각 다른 해결방법이 있는 것 같은데 나는 위 방법을 선택했다.

 

https://stackoverflow.com/questions/42541559/eslint-with-react-gives-no-unused-vars-errors