React / 번들러

*번들러?

 

리액트에서 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules디렉토리에 react모듈이 설치된다. 그러면 import구문을 통해 리액트를 불러와서 사용할 수있는데 여기서 한가지 알아야 할 점이 있다. 모듈을 불러와서 사용하는 것은 원래 웹 브라우저에서는 없던 기능인데 이러한 기능을 브라우저에서도 사용하기 위해 번들러 개념이 탄생한 것이다. 번들러는 파일을 묶듯이 연결하는 것을 의미하며, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js가 지원해준다. (참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.)

 

대표적인 번드러로는 웹팩, Parcel, browserify등의 도구들이 있으며, 각 도구마다 특징이 다른데 리액트 프로젝트에서는 주로 웹팩을 사용한다. 편의성과 확장성이 다른 도구들보다 뛰어나기 때문이다. 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐 하나의 파일을 생성해준다. 또한 최적화 과정에서는 여러개의 파일로 분리시켜준다.

 

리액트 프로젝트에는 다음과 같은 import코드들이 존재한다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

.위 import코드들은 웹팩을 사용하여 각각의 파일들을 불러서 사용한다는 의미이다. 이렇게 파일들을 불러오는 것은 웹팩의 로더라는 기능이 담당하며 로더에는 여러가지 종류가 있다. 예를 들어 css-loader는 CSS파일을 불러올 수 있게 해주고, file-loader는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다. 그리고 babel-loader는 자바스크립트 파일을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5문법으로 변환해 준다.

웹팩의 로더는 원래 직접 설치하고 설정해야하지만 리액트 프로젝트를 만들 때 사용했던 create-react-app이 번거로운 작업을 모두 대신해 주어 별도의 설정을 할 필요가 없다.

 

잠깐

ES5는 이전 버전의 자바스크립트를 의미하며 ES5형태로 변환하는 것은 구버전 웹브라우저와 호환하기 위해서이다.