[JS] Babel - React에서의 역할 및 구성

Babel

Babel은 사용된 Javascript 문법을 브라우저 환경에 맞춰 버전을 변경해 주는 Javascript 컴파일러다.

예를 들어, 아래와 같이 ES2015에 나온 화살표 함수를 지원하지 않는 브라우저에서 코드가 실행될 수 있도록 ES5 문법으로 변경해 주는 작업을 해 준다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

React에서 Babel의 역할

Babel과 함께 React를 사용하면 React에서 쓰인 JSX구문을 Javascript 구문으로 변환해 준다.

export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

	//JSX
  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
  
};
	//Babel
   
  return react.createElement(
	'div', 
    {}, 
    `Your dice roll: ${num}.
      ${react.createElement(
      	'button', 
        { onClick: handleClick }, 
        'Click to get a new number'
      )}
  )

자바스크립트 구문으로만 코드를 작성했을 때는 가독성이 좋지 않다는 단점이 있는데, JSX 구문을 대신 쓰면 가독성이 훨씬 좋아진다. Babel이 없었으면 JSX 구문과 함께 React를 쓰지 못할 것이다.

Babel 구성

babel은 그 자체로는 아무것도 수행하지 않는다.
따라서 변환 지시를 내려줘야 하는데, 어떤 변환을 할지는 babel 구성 파일을 통해 설정할 수 있다.

babel.config.json

babel.config.json 파일을 작업 디렉터리에 만들어서 Babel을 구성할 수 있다.

프로젝트의 특정한 한 개의 파일에만 적용하는 경우 .babelrc.json 파일을 구성해서 사용한다.
babel.config.json 파일은 node_modules와 함께 컴파일하는 경우 사용한다.

package.json파일이 위치한 작업 디렉터리의 최상단에 babel.config.json을 추가해야 한다.

//babel.config.json
{
  "presets": [ ],
  "plugins": [ ]
}

babel.config.js

json 대신js 확장자로 만들 수도 있다.

//babel.config.js

module.exports = function (api) {
  api.cache(true);

  const presets = [  ];
  const plugins = [  ];

  return {
    presets,
    plugins
  };
}

preset

preset은 plugin 묶음이라고 보면 된다.

plugin: 코드 변환 작업을 수행하는 자바스크립트 프로그램

@babel/preset-env preset

화살표 함수(es6)를 더 낮은 버전(es5)의 Jabascript 코드로 변환하기 위해서는 @babel/plugin-transform-arrow-functions plugin을 설치해 줘야 한다.

이와 같이 각 구문을 어떻게 변경할지에 대해 plugin을 설치해서 구성해 줘야 되는데, 모든 코드를 확인한 후 plugin인을 설치하고 구성하는 작업은 생각보다 많이 번거로울뿐만아니라 시간도 많이 걸린다.

이런 상황에서 구원해 주는 preset이 있는데 바로 @babel/preset-env preset이다.
@babel/preset-env preset 은 빌드타임에 대상 환경에 따라 필요한 플러그인을 동적으로 구성해 코드를 변환해 주는 편리한 preset이다.

polyfill

Babel문서를 읽다보면 polyfill이라는 단어가 자주 나온다.

polyfill은 대상 환경(브라우저 등)에서 지원하지 않는 자바스크립트 코드를 실행하기 위해 필요한 코드다.
즉, 브라우저가 이해할 수 없는 코드를 이해할 수 있게 하는 코드라고 볼 수 있다.

class, const, let, arrow function, spread operator과 같은 ES6 자바스크립트 구문은 babel이 컴파일 가능하지만 새로운 객체나 메서드 또는 함수는 babel이 컴파일 하지 못하기 때문에 polyfill이 필요하다.

@babel/preset-env preset plugin 옵션인 useBuiltIns을 사용하면 core-js(polyfill 라이브러리) 자동으로 추가되도록 할 수 있는데, 7.4.0 버전에서 지원이 중단되었기 때문에 직접 core-js를 코드에 추가해 구현하는 것을 추천하고 있다. (참고)

npm install core-js@3 --save 으로 설치 후 코드에 import해 주면된다.
import는 전체 파일 중 한 개에만 해야 하고, core-js에는 @babel-polyfill 이 포함되어 있다.