[리액트] 리액트에서 자주 나오는 용어 정리 (컴포넌트, 모듈, 번들러, 웹팩, 바벨, 렌더링)

1. 컴포넌트(Component)

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다. 또한 컴포넌트 내부에서 컴포넌트가 화면에 나타날때(Mount), 업데이트될때(Update), 사라질때(Unmount)의 작업을 처리할 수 있다.

 

2. 모듈(Module)

모듈이라는 단어는 모듈화 프로그래밍이라는 소프트웨어 디자인 기법에서 나온 말이다. 모듈화 프로그래밍이란 프로그램을 개발할 때 코드를 독립적이고 재사용할 수 있는 작은 모듈로 이루어지게 해야한다는 컨셉이다. 

 

즉, 모듈이란 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미한다. 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다.

 

3. 번들러(Bundler)

리액트 프로젝트를 시작하기 위해 create-react-app이라는 도구로 필요한 환경을 모두 구축해준다. 이때 웹팩이라는 번들러도 함께 설치가 된다.

 

번들러란 여러개로 나눠진 파일을 하나로 합쳐주는 도구를 말한다. 리액트에서는 왜 여러개로 나눠진 파일을 하나로 합쳐주는 도구가 필요할까?

 

리액트에서는 import라는 예약어를 사용해 모듈을 불러온다. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이다. 즉, 브라우저는 import라는 코드를 해석할 수 없다. 리액트로 된 프로젝트를 브라우저가 이해할 수 있으려면 번들러라는 도구를 사용해 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한 후 브라우저에 전송해야한다.

 

번들러의 종류는 여러개가 있지만 리액트에서는 대부분 웹팩을 사용한다.

 

3.1 번들러가 필요한 이유 정리

1. 프로젝트 규모가 커지면 유지보수가 어려워진다
2. 컴포넌트 단위로 나눠 각각 다른 파일에 저장한다
3. import 키워드를 사용해 각각의 컴포넌트를 불러와 조립한다
4. 이때 번들러를 사용해 여러개로 나눠진 파일을 하나로 합쳐준다 (webpack은 번들러의 종류중 하나이다)
5. 파일이 하나이기 때문에 웹브라우저에서 불러올 수 있다

 

4. 웹팩(Webpack)

위에서 설명했듯이 웹팩은 번들러의 한 종류로 리액트 프로젝트는 대부분 웹팩을 사용해 모듈을 하나로 합쳐준다.

 

웹팩에는 파일을 불러오는 로더(loader)라는 부분이 있는데 그 중에 하나가 babel-loader이다. babel-loader는 자바스크립트 파일들을 불러오고 바벨이라는 도구로 불러온 자바스크립트를 ES5 문법으로 변환시켜준다.

 

5. 바벨 (Babel)

바벨은 최신 자바스크립트 문법(ES6)을 ES5 버전 문법으로 변환해주는 도구(transcompiler)이다. ES6를 ES5로 변환시켜주는 이유는 최신 자바스크립트가 예전 웹브라우저가 호환이 되지 않는 문제점이 있기 때문이다. 또한, 리액트에서 사용하는 문법인 JSX는 정식 자바스크립트가 아니기 때문에 웹브라우저에서 호환이 되지 않아 ES5 문법으로 변환해야 한다.

 

6. 렌더링(Rendering)

렌더링이란 사용자 화면에 보여주는것을 말한다.