ESLint: 'React' must be in scope when using JSX (react/ react-in-jsx-scope)

React Native 에서 ESLint 를 사용할 때 "ESLint: 'React' must be in scope when using JSX (react/ react-in-jsx-scope)"  오류가 나고 있다.

React 17 버전 이후로는 [ import React from 'react'; ] 구문 없이도 코드를 작성할 수 있으나 ESLint는 이를 오류로 잡아내면서 발생하는 상황이다. 

이를 해결하기 위해서는 위의 import 를 모든 파일에 추가하면 되지만 react 에서 안써도 된다고 변경한 구문을 일일이 써줄 필요는 없기에 .eslintrc.js 에 rule 을 추가 해주는걸로 해결하도록 하자.

오류가 나고있는 상황

// .eslintrc.js
{
    ...,
    rules: {
        'react/react-in-jsx-scope': 'off',
        ...,
    },
    ...,
}

 

오류 해결

 

깔끔하게 해결되는걸 확인할 수 있다.