<읽기 전 주의> 이 글은 외국 블로그를 퍼온 문익점 글입니다. 읽은 블로그가 틀린 내용을 담고 있다면 이 내용도 틀릴 수 있습니다!
- 출처
https://hackernoon.com/why-import-react-from-react-in-a-functional-component-657aed821f7a
글쓰면서 공식 문서도 참고했으니 틀릴 가능성은 낮을 것 같다... 물론 영어를 잘못 읽었거나 내용을 잘못 이해했다면 틀렸을 가능성도 있으니 출처도 한 번씩 들어가 읽는 걸 추천한다.
궁금해진 이유
- 토이프로젝트를 하기 위해 lint 설정을 처음부터 다시 할 일이 있었는데, lint 설정을 마치니 'React' must be in scope when using JSX 라는 오류가 떴다.
- 이 오류의 원인을 찾아보니 컴포넌트 파일(.jsx) 안에 import React from 'react' 가 빠져있어서 발생하는 오류라고 했다.
- 오류를 보니, 저 줄을 왜 함수형 컴포넌트에는 항상 넣을까라는 궁금증이 들었다. 심지어 이 줄이 없어도 문제 없이 돌아가기는 한다.
- 그래서 이유를 찾아봤고, 이에 대해 정리된 블로그가 있어 번역 및 정리해보았다.
이슈의 원인
- 원인은 바로 BABEL과 JSX이다.
- JSX 엘리먼트는 단지 React.createElement()를 호출하는 편리한 문법에 불과하다.
(공식문서 참조 : https://ko.reactjs.org/docs/react-api.html#creating-react-elements)
- 따라서 BABEL로 JSX인 함수형 컴포넌트를 트랜스파일링하면 React.createElement를 이용한 코드로 변경된다. 그렇기 때문에 React.createElement를 호출하기 위하여 React가 필요한 것이다.
그런데 안써도 된다?
- 하지만 React 17부터는 안써도 된다. 왜냐면 새로운 방법의 JSX 변환을 사용하기 때문이다.
관련 내용 블로그 : https://dev.to/titungdup/you-no-longer-need-to-import-react-from-react-3pbj
공식 문서 : https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
- 따라서 쓰기 귀찮으신 분은 lint 설정을 변경하여 에러를 무시하도록 한 후 React 17 혹은 그 이후의 버젼을 사용하면 된다.
마지막으로 다시 한 번 출처
https://hackernoon.com/why-import-react-from-react-in-a-functional-component-657aed821f7a
https://ko.reactjs.org/docs/react-api.html#creating-react-elements
https://dev.to/titungdup/you-no-longer-need-to-import-react-from-react-3pbj
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html