자바스크립트의 산을 (겨우) 넘어서 리액트라는 정상을 향해 등산 중이다.
그러다 리액트에서 생성할 때, App.jsx에는 import React from ‘react’가 붙지만 하위 컴포넌트에서는 생략해도 작동이 되는 것에 궁금증이 생겼다.
import React from ‘react’가 뭐길레 넣어도 되고 생략해도 되는 것일까?
import React from ‘react’?
브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해주어야한다.
리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기 위해서 import React from ‘react’를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다.
1. Hello world! (JSX)
import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return <h1>Hello World!</h1>
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)2. Hello world! (JSX -> JS)
import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return React.createElemet("h1",null,"Hello World");
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)JSX에서 작성한 <h1>Hello, World!</h1>가 React.createElemet("h1",null,"Hello World")로 변환된 것을 볼 수 있다. 이처럼 JSX는 React라는 객체의 메소드를 이용하여 구성요소들을 생성하기 때문에 문서의 위에 import React from ‘react’를 작성해 해당 JSX가 객체React를 받아오고 추후 Babel이라는 웹팩을 통해 React를 유효한 JavaScript로 변환할 수 있도록 해준다.
그럼 왜 생략할까?
그럼 컴포넌트를 생성할 때
import React from ‘react’가 자동으로 작성되는데 지우면 안되는거 아닌가?
이는 작성하고 있는 컴포넌트가 상위 컴포넌트 인지 하위 컴포넌트 인지 파악하고 만약 상위 컴포넌트에 import React from ‘react’가 작성되었다면 하위에서는 생략해도 작동이 된다.
물론 생략하지 않아도 작동하는데에는 아무런 지장이 없다. 추후 웹팩을 통해 최적화된 코드로 작성되므로 중복에 대한 비효율성은 걱정하지 않아도 된다.
다만 굳이 필요하지 않은 코드를 작성할 필요가 있는가? 라는 생각을 하기 때문에 생략할 수 있는 코드는 생략하는 것이 좋다고 생각한다!
React 버전 17부터 생략 가능!
2020년 10월 20일에 릴리즈된 React v17를 보면, React 내부적으로 JSX transformer가 JSX를 React 요소로 변환하는 작업을 거치기 때문에 모든 컴포넌트에 import React from ‘react’를 작성하지 않아도 된다!
1. Hello world! (JSX)
function App() {
return <h1>Hello World</h1>
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)2. Hello world! (JSX -> JS)
import { jsx as _jsx } from "react/jsx-runtime"
function App() {
return _jsx("h1", { children: "Hello world" })
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)위의 예시와는 달라진 모습으로 변환된 모습을 볼 수 있다.
결론
import React from ‘react’브라우저가 읽을 수 있도록 jsx를 바꾸기 위해 작성- 상위 컴포넌트에 작성되었다면 하위에서는 생략 가능
- React 17버전부터 작성하지 않아도 된다.
참고 사이트
https://so-so.dev/react/import-react-from-react/
https://www.geeksforgeeks.org/why-do-you-need-to-import-react-in-functional-components/
https://hwani.dev/import-react/
