Babel과 react Runtime 옵션

Babel은 무엇일까?

babel 공식 사이트를 읽어보면 babel에 대한 설명이 잘 나와있다.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

• Transform syntax
• Polyfill features that are missing in your target environment
• Source code transformations

 

Babel은 문법 변환을 지원한다. 그래서 최신 JavaScript 코드를 이전 버전의 브라우저에서도 호환 가능하도록 구버전 JavaScript로 변환하거나 JSX 처럼 확장 문법을 js로 변환할 수도 있다. 또한, polyfill을 추가할 수도 있고, 소스 코드를 원하는 방향으로 수정할 수도 있다.

👉 polyfill
이전 브라우저에 없는 구현을 채워주는 스크립트다. (ex. Promise…)

JSX를 JS로 변환하기

babel 공식 사이트에서는 직접 JavaScript 코드를 넣어서 babel이 어떤 식으로 코드를 변환하는지 확인할 수 있다.

👉 JSX
JavaScript 구문 확장자로 JavaScript 파일 내에 HTML과 유사한 문법을 쉽게 작성할 수 있게 도와준다.

react Runtime 옵션

JSX는 Babel v7.9.0에 추가된 React Runtime 옵션에 따라 다른 방식으로 변환된다.

React v17 이전에는 JSX 문법으로 새로운 컴포넌트를 작성하면 이를 React.createElement로 변환했으며, 다음과 같은 문제점이 있었다.

1. React.createElement를 사용하기 위해 import React from 'react' 구문을 반드시 작성해야 함
2. react에서는 key와 ref를 특별한 props로 취급해서 컴포넌트 내에서 직접적으로 사용할 수 없다. 그래서 key와 ref를 props에서 제외하고 전달한다. 하지만 key와 ref를 props에서 제외함과 동시에 props의 불변성을 보장하기 위해 매번 props를 clone해야하는 문제가 발생
   

   createElement(type, props, ...children)

3. defaultProps와 React.lazy를 함께 사용할 수 없는 제약

이러한 문제를 해결하기 위해 Babel은 새로운 automatic 옵션을 추가했으며, 이를 사용하면 JSX가 더 이상 createElement로 변환되지 않는다.

변환 예시

// react 코드

import React, { useRef } from 'react';

function App() {
  return (
    <div>
      <MyComponent key="my-key" ref={myRef} name="John" />
    </div>
  );
}

export default App;

// classic

import React, { useRef } from "react";
function App() {
  return /*#__PURE__*/ React.createElement(
    "div",
    null,
    /*#__PURE__*/ React.createElement(MyComponent, {
      key: "my-key",
      ref: myRef,
      name: "John"
    })
  );
}
export default App;

// automatic 

import React, { useRef } from "react";
import { jsx as _jsx } from "react/jsx-runtime";
function App() {
  return /*#__PURE__*/ _jsx("div", {
    children: /*#__PURE__*/ _jsx(
      MyComponent,
      {
        ref: myRef,
        name: "John"
      },
      "my-key"
    )
  });
}
export default App;