[React from Scratch] import React from 'react' 생략 방법

CRA ( create-react-app) 를 사용하고 있지 않다면 이 블로그 포스팅이 도움이 될 것이다.

 

1. React 17 이전

function Hello() {
  return <h1>Hello, world!</h1>;
}

위 코드는 jsx 문법을 이용하고 있으며 이는 babel을 통해 js로 변환된다.

 

function Hello() {
  return React.createElement('h1', null, 'Hello, world!');
}

위와같이 변환이 되는데 import React from 'react' 를 생략한다면 React를 읽을 수 없다는 에러메세지가 출력된다.

 

이를 해결하기 위해서 모든 js파일에 react를 import 를 해주어야 했다.

 

1. React 17 이후

리액트는 17버전 이후부터 아래와 같이 jsx를 변환한다.

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

function Greet() {
  return _jsx('h1', { children: 'Hello, world!' });
}

따라서 매번 react를 import 해주지 않아도 된다.

 

cra를 사용한다면 이 부분이 자동적으로 해결이된다. 하지만 자신만의 boilerplate를 가지고 있다면 아래와 같이 추가할 요소가 있다.

 

babel.lrc 파일에 다음과 같이 추가해주자

preset-react에는 위와같은 jsx trsform이 가능하게 해주는 플러그인이 설치되어 있다.

 

위 둘 중 자신이 사용하는 것에 "runtime": "automatic"을 추가한다