import React from 'react' 생략하는 법

import React from 'react'는 리액트 17부터 생략 가능하지만, CRA 없이 처음 환경 설정을 하다가 생략이 안 되는 문제가 발생했다.
 

1. 타입 에러

아래와 같은 타입 에러는
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
 
tsconfig.json에서

{
  "compilerOptions": {
    ...
    "jsx": "react"
}

"jsx": "react"를 "jsx": "react-jsx"로 바꿔주면 된다.

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
}

🤔 왜 이렇게 하면 생략이 가능할까?

"compilerOptions의 jsx"는 컴파일러 옵션에서 JSX를 어떤 방식으로 해석하고 변환할 것인지 설정하는 부분이다. 'react'로 설정하면 React.createElement() 함수를 사용하여 JSX 요소를 변환하겠다는 의미가 된다. 하지만 리액트 17 버전 이후부터 사용되는 방식인 'react-jsx'는 JSX를 바로 사용할 수 있도록 변환한다. 그래서 'react-jsx'를 사용하면 에러가 나지 않는 것이다.

 

2. eslint 에러

만약 eslint에서 에러를 발생시킨다면

.eslintrc 파일 rules에 아래 코드를 추가해 주면 된다.

{
  rules: {
    'react/react-in-jsx-scope': 'off',
  },
};