들어가며
필자는 리액트를 공부중인 개발자 1인으로서, 공부하며 알게된 사실을 적어두었고 틀린 내용이 있을 수 있습니다. 지적, 조언 얼마든지 감사히 받아들이겠습니다.
React란?
메타(전 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리이다. 여기서 프레임워크가 아닌 라이브러리라는 사실을 이해하자.
간단하게 등장 배경을 설명하면, React는 JQuery, Angular의 시대를 거쳐 다음으로 인기를 얻게 된 프론트엔드 기술로, 이후 Vue, Svelte 등 개선된 기술들이 등장하긴 했지만 React에 비해 압도적인 이점이 없어 여전히 가장 많이 사랑받고 있다.
SPA(Single Page Application)를 전제로 사용되며, Dirty Checking(상태 변경 검사)와 Virtual DOM(가상 DOM)을 이용해 업데이트가 필요한 요소만 업데이트하므로 리랜더링이 잦은 환경에서 빠른 퍼포먼스를 내도록 해준다.
라이브러리 vs 프레임워크?
왜 React는 프레임워크가 아니라 라이브러리일까.
이는 라이브러리와 프레임워크의 차이점을 보면 알 수 있다.
| 특징 | 라이브러리 | 프레임워크 |
| 제어 흐름 | 개발자가 제어 | 프레임워크가 제어 흐름을 관리 (Hollywood Principle) |
| 기능의 범위 | 특정 작업에 초점 (예: UI 렌더링) | 애플리케이션 전반을 포괄 (라우팅, 상태 관리 등 포함) |
| 구조 강제성 | 유연함, 개발자가 원하는 대로 구조 설계 가능 | 규칙과 구조를 강제, 프레임워크 방식에 따라야 함 |
| 확장성 | 개발자가 필요한 도구를 조합해 확장 가능 | 프레임워크 내장 도구를 기반으로 작업 |
무엇보다도, React는 UI를 구성하는 작업에만 초점이 맞춰져 있고, 다른 부분(라우팅, 상태 관리 등)은 포함하지 않는다. (이로 인해 Redux[상태관리], React Router[라우팅] 등 외부 라이브러리를 함께 사용한다.) 프레임워크는 이미 내장된 도구와 기능을 사용하는 것이 일반적이며, 외부 라이브러리를 추가할 필요가 적다.
또한, React는 프로젝트를 구성하는 방식이나 코드 구조를 강제하지 않는다. 개발자는 원하는 방식으로 컴포넌트를 설계하고, 상태 관리 및 라우팅 방법도 자유롭게 선택이 가능하다. 조금 더 설명하자면, 프레임워크는 특정 디렉토리 구조나 규칙을 따르도록 강제한다. 예를 들어, Angular는 모듈, 서비스, 컴포넌트 간의 명확한 구조를 강요한다.
SPA란?
말그대로 Single Page Application. 페이지를 하나만 가지는 어플리케이션이다.
웹서비스를 만들 때 MPA(Multi Page Application)는 여러 페이지로 만들어 내용이 변할때 페이지를 계속 전환 시켰다면, SPA는 화면 안에서 바뀌는 내용에 해당하는 부분만 다시 랜더링을 시킨다.
화면 구성이 복잡하지 않던 시절에는 MPA만으로 충분했지만, 페이지 하나가 무거워진 지금은 계속 페이지가 바뀌고 화면 전부가 다시 랜더링 되어야 하는게 버거워지기 시작했고, SPA의 필요성이 높아지게 되었다.
세팅
1. Node.js 설치하기
프로젝트 진행을 위해선 npm이 필요하고, 이를 위해 node.js를 설치해준다.
2. 프로젝트 생성
Vite를 이용해 프로젝트를 생성한다. (Vite 외에도 CRA(Create React App), Next.js, Remix, Gatsby, Parcel 등으로 가능하다.)
npm create vite@latest my-app // my-app 자리에 프로젝트명 입력
cd my-app // my-app 폴더로 이동
npm install // package.json에 명시된 모든 패키지 설치
3. 프로젝트 실행
서버를 켜서 나온 주소를 브라우저 주소창에 입력해 접속하면 프로젝트의 현재 모습을 확인 가능하다.
그 주소는 대체로 http://localhost:5173 이다.
npm run dev // Vite 개발 서버 실행Vite 란?
프론트엔드 개발을 위해 만들어진 빠르고 간단한 빌드 도구(아래 <빌드 도구? 번들러?> 부분 보고 올 것)이다. (흔히 '비트'라고 발음한다.)
Vite의 주요 특징은 다음과 같다.
- 빠른 개발 서버: ESM(ECMAScript Module)을 기반으로 작동하며, 브라우저가 직접 JS 모듈을 가져오고 전체 애플리케이션을 번들링하지 않고 변경된 파일만 즉시 처리하기 때문에 서버 시작 속도가 매우 빠르다.
- 빠른 HMR (Hot Module Replacement): 변경된 파일만 새로 로드하므로, 코드를 수정하면 브라우저가 실시간으로 업데이트된다.
- 최적화된 빌드: Rollup을 사용해 빌드하여 최적화된 결과물을 생성한다. 코드 분할, 트리 쉐이킹 등 현대적 기능을 기본적으로 지원한다.
- 간편한 설정: 설정 없이도 시작 가능하고, vite.config.js로 확장이 가능하다. 기존 번들러처럼 복잡한 설정 파일을 만들 필요가 없다.
ESM (ECMAScript Module) 이란?
JavaScript에서 표준화된 모듈 시스템으로, 파일을 모듈 단위로 나누고, 서로 필요한 기능을 가져오거나 내보낼 수 있도록 해주는 기능이다. JS는 원래 모듈 시스템이 없었지만, ES6(ECMAScript 2015)부터 표준 모듈 시스템인 ESM이 도입되었다. 기존 CommonJS (Node.js)나 AMD 같은 모듈 시스템을 대체하거나 함께 사용할 수 있는 표준 방식이다.
특정 값이나 함수 앞에 "export" 키워드를 붙여서 내보내고, "import" 키워드를 사용해 다른 모듈에서 값을 가져온다.
파일 하나가 하나의 모듈이고, 정적 분석(코드 실행 전 분석)을 통해 미리 모듈간 의존성을 파악하며, Strict Mode에서 실행되며, 브라우저에서 ESM 사용시 비동기로 로드된다는 특징을 갖고 있다.
이러한 모듈 시스템 덕분에, 다른 모듈 시스템과 비교해 일관성이 있고, 최신 도구들에서 기본적으로 지원하는 등 표준화를 이뤘고, 정적분석을 통해 최적화(트리 쉐이킹 등)가 가능하며, 가독성과 유지보수성을 높이는 효과를 가져왔다.
HMR (Hot Module Replacement) 란?
웹 개발에서 코드 변경 사항을 애플리케이션을 새로 고치지 않고도 실시간으로 반영할 수 있는 기능. 개발 서버(Vite, Webpack 등)가 소스 코드를 감시하며 변경을 감지하고, 변경된 모듈만 브라우저로 전송되어 실행 중인 어플리케이션에 반영하는 식으로 동작한다.
페이지를 새로고침하지 않아서 현재 상태를 유지 가능하고, 바로바로 변경 사항이 나타나기 때문에 개발자 경험(DX)가 향상 된다.
빌드 도구? 번들러?
결론부터 말하자면 빌드 도구가 더 넓은 개념으로, 번들러를 포함한다.
번들러는 여러 개의 파일(HTML, CSS, JS 등)을 하나의 파일 또는 적은 수의 파일로 묶어서 브라우저에서 효율적으로 실행할 수 있도록 만드는 도구이다. 번들링 과정을 통해 웹 애플리케이션의 모듈화된 코드를 최적화된 형태로 제공한다. 번들링 과정에서 모듈 합치기, 의존성 분석, 최적화, HMR(Hot Module Replacement)이 일어난다. 대표적인 번들러로 Webpack, Rollup, Parcel 등이 있다.
빌드 도구는 번들러를 포함한 다양한 개발 및 배포 관련 작업을 수행하는 도구이다. 빌드 도구는 번들링(번들러의 역할), 트랜스파일링, CSS전처리, 파일 최적화, 개발 서버 제공, 배포 준비를 하게 된다. 대표적인 빌드 도구로 Vite, Esbuild, Snowpack 등이 있다.
추가로 알아두기
npm install 명령어를 실행 시 node_modules라는 폴더가 생성되며, 프로젝트 실행에 필요한 모든 패키지가 여기 설치된다.
.gitignore에 node_modules를 포함 시켜 깃허브에 안올라가도록 해주자. 이미 package.json에 명시되어 있으므로, 다른 환경에서 프로젝트 실행시 npm install로 받아주면 된다. 용량을 굳이 낭비할 필요가 없다.