React 개발 환경 직접 구축해보기 - 1. 리액트가 작동하는 방식

리액트를 배우기 전에 (급) 미니 세션을 통해 리액트가 어떻게 작동하는지 접했는데,

당시에는 리액트가 작동하는 방식은커녕 어떤 녀석인지도 모르는 백지상태에서 들었던지라 거의 반 이상을 이해할 수 없었다.

 

리액트를 처음 접한 지 3개월 정도 지났다.

이제 어디가서 "리액트를 할 줄 안다"라고 말해야 할 텐데.. 

습관적으로 작성하던 CRA, 그 뒤에 어떤 작동 방식이 있는지

알고 사용하지 않으면 진정 할 줄 안다고 말할 수 없기에, 그때의 기억을 되살려 정리해본다.

 

총 세 개의 포스팅으로 나누어 정리해보려고 한다.

1. 리액트가 작동하는 방식

2. Webpack 들여다보기

3. Babel 들여다보기

---

리액트 React

페이스북에서 개발하고 관리하는 UI 라이브러리다.

여기서 UI 라이브러리라고 꼭 집어 이야기하는 이유는, 리액트가 UI 기능만 제공하기 때문이다.

전반적인 시스템을 구축하려면 또 다른 라이브러리를 사용하면 된다. (ex) react-dom, react-redux 등)

 

SPA 웹 애플리케이션을 개발할 때 리액트와 많이 비교되는 것 중에 구글이 만든 Angular가 있다.

Angular는 UI만 제공하는 리액트와 달리 프로젝트 생성부터 코드 최적화 작업까지 개발에 필요한 다수의 기능을 제공하는 프레임워크다. 

그럼 Angular를 사용하면 되지 않겠냐고 이야기할 수 있지만.. 기능이 많은 만큼 배우는데 어렵다..

또 개발 과정에서 필요한 모든 것을 갖춘 풀 패키지인 만큼 자유도가 떨어진다.

때문에 보통 규모가 크면서, 장기프로젝트로 진행될 때 많이 사용한다고 한다.

 

그럼 React는 규모가 작은 프로젝트에서만 사용하냐고 되물으신다면 그것또한 아니다..

각각 장단점이 있는것 아니겠습니까..

React는 Virtual Dom을 통해 UI를 빠르게 그리고 최소한으로 업데이트한다는 강력한 장점 덕분에

Netflix, Notion, Airbnb 그리고 지금 이 티스토리 등 많은 기업에서 애정 하며 사용하고 있다.

 

React ↷ Browser

React는 ES6, jsx(JavaScript의 확장 문법)을 통해 작성된다.

하지만 이렇게 작성된 것들을 모든 브라우저가 이해할 수 있지 않을뿐더러(물론 chrome은 ES6 문법을 이해할 수 있지만), jsx 문법은 이해하지 못한다.

 

그래서 브라우저가 이해할 수 있는, 브라우저가 알아들을 수 있는 문법으로 바꿔주어야 한다.

이 과정을 트랜스파일러(트랜스컴파일러)가 도와준다.

가장 널리 쓰이는 트랜스파일러는 Babel과 Traceur인데, React에서는 바벨을 사용한다.

 

여기서 잠깐, 트랜스파일링 하기 전에 작성된 파일들을 최대한 적게 그리고 빨리 받아오기 위해 번들링 하는 과정이 필요하다.

쉽게 이야기해서 내가 작성한 웹페이지에 사용되는 모든 자원들(js뿐만 아니라 css나 이미지 등 모두 포함)을 한꺼번에 묶어 연결하는 것이다. 

번들러 역시 rollup, webpack, esbuild 등 다양한데 React에서는 가장 널리, 많이 쓰이는 webpack을 사용한다.

 

정리하자면

React로 작성된 ES6, jsx 문법의 파일들은 webpack을 통해 번들링 되고, Babel을 통해 트랜스파일링 되면서 브라우저에 뿌려진다.

 

Webpack(웹팩)

보통 편의를 위해 여러 개의 모듈로 나눠서 작업을 한다.

하지만 브라우저에서 파일 단위 모듈 시스템을 이용하는 것은 흔히들 말하는 네트워크 병목 현상을 일으킬 수 있다.

이러한 문제 때문에 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요하다.

웹팩이 바로 모듈 번들러이다.

웹팩에서는 JavaScript, css, png 등 모든 것을 모듈로 본다. 

 

웹팩의 주요한 속성

- entry

entry는 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 JavaScript 파일 경로이다. 웹팩은 entry를 통해서 모듈을  불러오고 하나의 파일로 묶는다.

- output

시작점 entry에서부터 찾은 모듈을 번들링한 결과물을 내뱉을(?) 위치를 어디에 저장할 것인지를 의미한다.

- loader

웹팩은 기본적으로 JavaScript나 Json만 빌드할 수 있는데, 자바스크립트가 아닌 다른 자원(HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성이다. 어떤 파일을 컴파일 할 것인지 정하고, 이를 변환해줄 loader는 따로 설치도 해줘야 한다.

 

Babel(바벨)

Babel은 JavaScript ES6 문법을 ES5로 변환해주는 트랜스파일러이다.

이것을 통해 React를 일반 브라우저에서 실행시킬 수 있다.

바벨 공식 홈페이지, 변환한 코드는 파이널 프로젝트의 App.tsx

작성한 tsx 파일이 바벨을 통해 브라우저가 알아들을 수 있는 언어로 변환된다. 이것이 바벨..

 

---

다음 포스팅에서 자세하게 webpack을 직접 설정해보면서 create-react-app을 사용하지 않고 React를 구현해보는 실습을 다루어 보려고 한다!