[React] 바벨 (Babel)

📄 바벨

바벨은 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용 가능하게 자바스크립트 코드를 변환해주는 컴파일러입니다.

// 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;
});

리액트에서는 JSX 문법을 createElement함수로 호출하기 위해 바벨을 사용합니다.

npm install @babel/core @babel/cli @babel/preset-react

npx babel --watch src --out-dir , --presets @babel/preset-react

src디렉토리의 모든 JS파일을 분석하고 변환한 내용을 적용합니다.

한번 컴파일 하고 끝나는 것이 아니라 파일이 바뀔 때마다 자동으로 컴파일을 합니다.

바벨에는 프리셋과 플러그인이 있다.

플러그인와 프리셋은 공식으로 정해진 것을 사용할 수도 있고 직접 자신만의 플러그인을 작성하여 변환을 코드에 적용할 수도 있다.