[React] babel과 webpack의 차이

 

React의 개발 환경을 구성하려면, 여러가지 도구들이 필요하고,

이 도구들에 대한 설정을 해 주어야 한다.

대표적으로 webpack + babel 설정을 해 주어야 한다.

 

• webpack : JavaScript의 static module bundler
• babel : JavaScript Compiler (Transpiler)

 

babel

babel은 Javascript의 compiler라고 할 수 있다.

Java나 C의 컴파일러처럼, 소스코드를 바이너리 파일로 변환하는 것은 아니지만,

아래와 같이 React의 JSX문법을 Vanilla JavaScript로 변경하거나,

최신버전의 문법을 구 버전 문법으로 변환해 준다.

 

JSX 를 Vanilla JavaScript로 변경해 준다. 

React에서는 JSX라는 React 만의 특별한 문법을 사용한다.

하지만, JSX 문법은, 브라우저가 잘 모르는 문법이기 때문에,

브라우저가 이해할 수 있는 Vanilla JS로 변경해 주어야 한다.

이것을 babel이 해 준다.

 

아래 그림과 같이 

JSX 문법으로 작성한 코드(왼쪽)를 

Vanilla JavaScript(오른쪽)로 변환해 준다.

Vanilla JavaScript를 React에서 직접 작성해도 되지만,

보는 것처럼 작성하기 너무 복잡하고 직관적이지 않기 때문에 

React에서는 JSX라는 문법을 제공해 준다.

우리는 JSX 문법을 사용하면, babel이 브라우저가 읽을 수 있는 언어로 transpile 해주는 것이다.

( 직접 확인하기 )

 

최신 JavaScript를 모든 브라우저에서 지원하는 문법으로 변경해 준다. 

ECMA에서 매년 표준을 정하고 있기는 하지만,

모든 브라우저가 최신의 ECMAScript 문법을 다 따르고 있는 것은 아니다.

따라서, 우리는 가능한한 많은 브라우저를 지원하기 위해

대부분의 브라우저들이 지원하는 ECMAScript 문법으로 코드를 작성해 주는 것이 좋다.

따라서, babel은 최신문법의 JS를 낮은 버전의 JS로 변환해주는 역할도 한다.

아래 그림은

ES6 문법을 사용 중인 코드(왼쪽)를 babel이 ES5 문법으로 변환한 것이다.

( 직접 확인하기 )

 

 

webpack

webpack은 JavaScript Application의 모든 코드들을 잘 모아서 합쳐준다.

그리고, 브라우저가 쉽게 이해 할수 있는 형태로 바꾸어 준다.

그렇다면, babel과 하는 일이 비슷할 것 같은데??

하지만 그 둘은 같지 않다.

webpack은 일종의 build system 이라고도 할수 있다.

webpack은 JavaScript Application에 있는 여러 타입의 파일을 설정에 따라서 transpile 한다.

그 대상에는 물론 JSX, JavaScript도 있다.

이 JSX, JavaScript를 transpile하기 위해 webpack은 babel을 사용한다.

또한, webpack은 sass로 작성된 파일도, css로 transpile 한다.

이때는 babel 대신 sass-loader를 사용한다.

webpack에서 사용할 수 있는 loader들은 다음 페이지에서 확인 할 수 있다.

https://webpack.js.org/loaders/

 

 

---

 

다음 글에는

CRA로 webpack과 babel 설정없이

React 개발환경을 구성하는 방법에 대해서 정리해 보았다.

[React] Create React App (CRA) 으로 개발환경 구성하기