Babel은 무엇이고 React에서 어떻게 동작할까
TL;DR 👀
개념
자바스크립트 코드를 변환해주는 트랜스파일러
목적
- 바벨을 사용하면 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있다.
- 코드 주석을 제거하거나 코드를 압축하는 용도로 사용할 수 있다.
탄생배경
"사람들은 이때까지 같은 언어로 말을 했는데 신은 그들로 하여금 다른 언어로 말을 하게 만들었다. 그들의 말이 갑자기 혼란 되기 시작하여 그들은 어느새 말을 통할 수 없었다." 바벨탑의 전설을 떠올리면 바벨이 더 기억에 남을지도 모르겠다.
사람들이 서로 다른 언어를 쓰게된 것 처럼 브라우저도 각자 이해할 수 있는 문법의 버전이 다르다. 또한 자바스크립트 언어의 문법은 계속해서 빠르게 진화하고 있어 자바스크립트가 실행되는 환경 (브라우저, 노드)에서 이를 쫓아가지 못하고 있기도 하다.
바벨은 이러한 크로스 브라우징 문제를 해결해준다.
ES6가 막 나왔을 때 대부분의 브라우저가 ES5만 지원하고 있었기 때문에 ES6를 사용할 수 없었다. 그 때 바벨 (당시 이름 6to5)이 ES6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해주며 인기를 얻었다.
TypeScript/React에서의 활용
바벨은 ES6 이상의 최신 문법 뿐 아니라 TypeScript나 리액트에서 사용하는 JSX 문법을 변환할 때도 사용된다.
JSX 문법은 자바스크립트 표준이 아니기 때문에 파일을 그대로 실행하면 에러가 발생하는데 바벨은 JSX 문법으로 작성된 코드를 createElement 함수를 호출하는 코드로 변환해 준다.
// html
<div>
<p> hello </p>
<p> world </p>
</div>
// createElement 함수
createElement(
'div',
null,
createElement('p', null, 'hello'),
createElement('p', null, 'world'),
)
// 결과는 동일하다.createElement 두 번째 매개변수에는 html 태그의 속성 값이 들어가는데 속성이 있을 경우 createElement 코드는 훨씬 더 복잡해질 것이다.
createElement 함수보다는 JSX 문법으로 작성하는 리액트 코드가 훨씬 가독성이 좋다.
Babel 더 알아보기
플러그인 (Plugin)
- 변환 방식을 결정하는 속성
바벨은
파싱 (parsing),
변환 (transforming),
출력 (printing)을 수행하는데
변환은 플러그인 단위로 이루어진다. 두 번의 변환이 필요하다면 두 개의 플러그인을 사용한다.
프리셋 (Preset)
- 플러그인의 집합
하나의 목적을 위해 여러 개의 플러그인이 필요할 수도 있는데 플러그인을 일일이 설정하게 되면 의존성을 관리하기 어렵고 유지보수가 어려워진다. 그래서 목적에 맞는 플러그인들을 집합으로 만들어 둔 것이 프리셋이다.
예시
@babel-preset-minify
: 자바스크립트 코드를 압축하는 플러그인 모음
@babel/preset-react
: react application을 만들 때 필요한 플러그인 모음
Babel 사용하기
npm install —-save-dev @babel/core @babel/cli @babel/preset-env
npm install —-save @babel/polyfill--save-dev
: devDependencies으로 설치하는 이유는 바벨이 빌드 시에만 필요하기 때문이다.
@babel/core
: 바벨을 실행할 때 필수로 설치해야하는 패키지
@babel/cli
: command line에서 바벨을 실행할 수 있게 해주는 라이브러리이다.
@babel/preset-env
: 바벨 플러그인의 집합
@babel/polyfill
: 바벨로 변환할 수 없는 문법에도 대응할 수 있도록하는 코드 조각모음 + 폴리필목록
