React 교재 · 입문 2편

React Vite 설치 — 첫 프로젝트 5분 셋업

1편 이론 끝, 이제 실제 셋업. Vite 한 줄로 모던 React 프로젝트가 5분 안에 굴러간다.

1편에서 "React 가 뭐길래" 정리했으니 이제 실제로 굴려본다. 그런데 5년 전 가이드들이 자주 추천하던 create-react-app (CRA) 은 2023 년에 사실상 deprecated. 2026 년 현재 React 공식 추천 시작 도구는 Vite (또는 Next.js·Remix 같은 풀스택 프레임워크).

이번 2편은 Vite 한 줄로 첫 프로젝트를 만들고, 무엇이 자동으로 따라오는지, HMR 이 왜 "마법" 처럼 느껴지는지 — 5분 안에 손에 익는 셋업.

1. 왜 Vite 인가 — CRA 와 무엇이 다른가

Vite (프랑스어로 "빠르다") 는 Evan You (Vue 창시자) 가 만든 빌드 도구. CRA·webpack 시대의 답답함을 해결하려고 등장했다.

비교	CRA (webpack)	Vite (esbuild + Rollup)
dev server 시작	중·대형 프로젝트 30초~2분	★ 1~3초 (10배+)
파일 저장 후 반영	2~5초	★ <500ms (HMR 즉시)
현재 유지보수	deprecated (2023)	활발, 매월 릴리스
설정 복잡도	eject 안 하면 제한, 하면 지옥	vite.config.ts 1개로 명확

속도 차이의 정체 — Vite 는 dev 모드에서 번들 안 함. 브라우저의 native ESM 을 그대로 활용해 변경된 파일만 즉시 전송. CRA 는 변경할 때마다 전체 번들 재계산. 프로젝트가 커질수록 격차가 벌어진다.

2. 5분 셋업 — npm create vite 한 줄

실제 명령. Node.js 18+ 이 깔려있어야 한다 (없으면 nvm 으로 설치).

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

4 줄. 첫 줄에서 --template react-ts 가 핵심 — TypeScript 까지 포함된 React 템플릿 생성. 1편에서 말한 대로 채용 시장 표준이 TS+React 라 처음부터 TS 로 가는 게 답. 순수 JavaScript 만 원하면 --template react.

마지막 npm run dev 가 끝나면 터미널에 Local: http://localhost:5173/ 출력. 브라우저에서 열면 회전하는 React 로고 + Vite 로고. 5분 안에 첫 화면.

npm 외 옵션

같은 명령을 pnpm create vite@latest 또는 yarn create vite 로도 가능. 박준성님 회사처럼 모노레포 운영이면 pnpm 이 디스크·속도 둘 다 우위. 아니면 그냥 npm 으로 충분.

3. 폴더 구조 — 8개 파일만 알면 충분

생성된 폴더를 열면 파일이 많아 보이지만, 실제로 매일 만지는 건 8개.

my-react-app/
├── src/
│   ├── App.tsx          ← 메인 컴포넌트 (여기서 시작)
│   ├── main.tsx         ← 진입점 (HTML 의 #root 에 App 마운트)
│   ├── App.css          ← 스타일
│   └── assets/          ← 이미지·아이콘
├── public/              ← 빌드 결과에 그대로 복사되는 정적 파일
├── index.html           ← 브라우저가 처음 받는 HTML (CRA 와 달리 root 에!)
├── vite.config.ts       ← Vite 설정 (플러그인·alias·서버 옵션)
├── tsconfig.json        ← TypeScript 컴파일러 옵션
└── package.json         ← 의존성·스크립트

CRA 와 결정적 차이 — index.html 이 src 가 아니라 프로젝트 root 에 있다. Vite 는 이 파일을 "진짜" HTML 로 취급하고 esbuild 가 파싱해 의존성 그래프를 추적. 그래서 index.html 안에서 <script type="module" src="/src/main.tsx"> 로 직접 진입점을 가리킨다.

흔한 첫 실수 — public 폴더 안에 컴포넌트나 CSS 를 넣으면 안 됨. public 은 빌드 시 그대로 복사되는 정적 자산용 (favicon·robots.txt·OG 이미지). src 안에 두지 않으면 import 가 불가능하고 코드 분할·최적화 혜택을 못 받는다.

4. HMR — 저장하면 0.3초 안에 화면 갱신

Vite 의 진짜 매력은 Hot Module Replacement (HMR). 코드를 저장하면 페이지 전체 새로고침 없이 변경된 컴포넌트만 즉시 교체된다. 폼에 입력한 값·열어둔 모달 상태가 유지된 채로.

실험 — App.tsx 의 첫 <h1>Vite + React</h1> 를 <h1>안녕 React</h1> 로 바꾸고 저장. 브라우저로 가면 거의 즉시 텍스트만 바뀌어 있다. 페이지 새로고침 아이콘이 한 번도 돌지 않음.

왜 이게 마법인가 — 폼 작성 중 코드 한 줄 고치는 흔한 시나리오 — CRA 였으면 새로고침되면서 입력값 다 날아감. Vite HMR 은 그대로 유지. 디버깅·반복 시도 속도가 체감으로 2~3배. 한 번 익숙해지면 못 돌아간다.

3편에서 첫 직접 만든 컴포넌트 — 함수형 컴포넌트의 정확한 형태와 호출 방법으로 들어간다. 이번 2편의 App.tsx 가 이미 함수형 컴포넌트 예시니까 3편이 곧바로 이어진다.

React 교재 3편 — 첫 컴포넌트 만들기. 함수형 컴포넌트의 정확한 형태, JSX 반환, 컴포넌트 호출 = JSX 태그.