바벨(babel)

개발자들은 좋은 기능이 탑재된 최신버전의 ECMAScript로 개발하기를 원한다

그래서 개발할 때는 최신 버전의 ECMAScript를 사용하고

사용자에게 배포할때는 Javascript transcompiler 를 이용해서

변환된 코드를 생산해주는 transcompile이 가능한 것이 바로 babel

 

바벨(babel)은 자바스크립트 코드를 변환해주는 컴파일러다.

바벨을 사용하면 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있다.

 

ES6가 막 나왔을 때는 대부분의 브라우저가 ES5만 지원하고 있었기 때문에 ES6문법을 사용할 수 없었다.

그때 바벨이 Es6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해 줬다.

ES6 문법을 사용하고 싶어 하는 개발자가 많았기 때문에 바벨의 인기도는 높아졌다.

 

바벨은 자바스크립트 최신 문법을 사용하는 용도 외에도 다양하게 활용될 수 있다.

이를테면, 코드에서 주석을 제거하거나 코드를 압축하는 용도로 사용될 수 있다.

리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용한다.

바벨이 JSX 문법으로 작성된 코드를 createElement 함수를 호출하는 코드로 변환해준다.

 

즉, JSX가 아닌 createElement 함수를 호출하는 것이 render 메서드의 기본이지만,

createElement는 가독성이 떨어지기 때문에 흔히 사용하는 JSX 문법으로 컴포넌트를 구현하게 되고,

자바스크립트 표준이 아닌 JSX 문법을 적용하기 위해 createElement 함수로 컴파일하여 돔에 렌더링하는 과정을 거친다.

이 컴파일 역할을 하는 것이 바벨(babel) 이다. 

 

바벨을 사용하기 위해서는 패키지 설치가 필요하다.

 

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

 

@babel/cli에는 커맨드라인에서 바벨을 실행할 수 있는 바이너리 파일이 들어있다.

@babel/preset-react에는 JSX로 작성된 코드를 createElement 함수를 이용한 코드로 변환해주는 바벨 플러그인이 들어있다.

 

사용법은 다음과 같다

npx babel --watch src --out-dir . --presets @babel/reset-react 또는 ./node-modules/.bin/babel

위의 명령어를 실행하면 src 폴더에 있는 모든 자바스크립트 파일을 @babel/preset-react 프리셋을 이용해서 변환 후 현재 폴더에 같은 이름의 자바스크립트 파일을 생성한다. watch 모드로 실행했기 때문에 src 폴더의 자바스크립트 파일을 수정할 때마다 자동으로 변환 후 저장해준다.