[React] import React from "react"

이애진·2023년 3월 19일

React

목록 보기

23/28

1. 서론

지난 주에 회의하다가 import React from "react"; 가 왜 없어졌는지에 대한 얘기가 나왔었는데 정리를 좀 해야할 것 같다

2. import React from "react"가 필요했던 이유

브라우저는 html, css, javascript만 읽을 수 있기 때문에 React는 읽지 못한다
그렇기 때문에 JSX를 JSX transformer를 사용해 자바스크립트로 변환시켜야한다
이 때 React 객체를 가져오기 위해서 import React from "react"를 통해 불러와야한다

2.1) jsx

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return <div>Hello World</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

2.2) jsx -> javascript

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return React.createElement("hi, null, "Hello World");
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<div>Hello World</div>가 React.createElement로 변환된 것을 볼 수가 있다

JSX 엘리먼트는 단지 React.createElement를 호출하는 편리한 문법에 불과하기 때문에 웹팩으로 JSX를 트랜스파일링해서 React.createElement를 이용한 코드로 변경해야한다

그래서 import React 가 반드시 필요했던 것

하지만 이 방식은 성능상에도 좋지 않다고 하는 것 같다
왜 성능에 좋지 않다고 하는지는 아직 이해가 안됐다

3. React 17 버전 이후부터는 생략 가능

React 17버전 부터 React 내부적으로 JSX를 React 요소로 변환하는 작업을 거치기 때문에 생락이 가능하다

3.1) jsx

function App() {
  return <div>Hello World</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

3.2) jsx -> js

import { jsx as _jsx } from "react/jsx-runtime";

function App() {
  return _jsx("div", { children: "Hello World" });
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);