React [ Vite]

React (CRA) vs. Vite 비교

React를 개발할 때 일반적으로 create-react-app (CRA)과 Vite 두 가지 방식이 많이 사용됨.

 

두 방법 모두 React 앱을 설정하지만 차이점이 존재

1. 기본 개념

항목	Create React App (CRA)	Vite
개발 서버	Webpack 기반의 개발 서버 사용	ES 모듈을 활용한 빠른 개발 서버
번들러	Webpack 사용	ESBuild (Go로 작성된 초고속 번들러) 사용
핫 리로딩 (HMR)	느림	매우 빠름
빌드 속도	느림	빠름
환경설정	자동 설정 (Webpack)	간단한 설정 (vite.config.js)
SSR 지원	직접 설정 필요	기본적으로 지원
추천 상황	기존 CRA 프로젝트 유지, 익숙한 방식 선호	최신 React 개발, 빠른 빌드 속도 필요

 

2. 설치방법

(1) CRA로 설치

npx create-react-app my-app
cd my-app
npm start

 

(2) Vite로 설치

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

 

3. 어떤 방식을 선택할까?

✅ CRA를 선택할 경우

• 기존 프로젝트가 CRA로 되어 있다면 유지하는 것이 좋음.
• Webpack 설정을 커스텀할 필요가 있을 경우.

✅ Vite를 선택할 경우

• 빠른 개발 속도와 빌드 속도를 원한다면 Vite를 선택하는 것이 유리.
• 최신 React 프로젝트를 시작한다면 Vite가 훨씬 빠르고 효율적.
• 서버 사이드 렌더링(SSR) 및 코드 분할을 고려한다면 Vite가 더 유리.