babel은 컴파일러가 아니라 transpiler이다.
컴파일러를 쉽게 말하면 우리가 쓰는 코드들을 기계가 알아듣게끔 기계어로 바꿔 주는 게 컴파일러이다.
transpiler 이란 같은 언어를 조금 다르게 바꿔 주는거다.
이것을 쓰는 이유는 예전 브라우저들이 es6 이상의 최신 문법들을 사용해줄 수 있게 플러그인 등을 설치해서 호환을 해준다. 현제 크롬은 없어도 호환이 되는 게 많다.
[1, 2, 3].map((n) => n + 1); //es6 or above이 화살표 함수가
[1, 2, 3].map(function(n) {
return n + 1;
});로 변하게 해준다.
바벨 쓰는 이유 중 제일 중요한 것은 이것을 써야지만 react를 쓸 수 있기 때문이다. 정확히 말해서 react 와 같이 씀으로써 모듈, JSX, 다양한 브라우저, 많은 기능(예를 들어서 async/await)들을 쓸 수 있다.
JSX 란 html 형식을 js에서 비슷하게 쓸 수 있게 만드는 것이라고 생각하면 편하다. 그래서 이것을 react 와 써서 UI의 형태를 정의한다.
references:
https://medium.com/@ljs0705/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a