Frontend/React
Vite와 Create React App(CRA) 비교
by 삐뚤비버
2025. 8. 11.
Vite와 Create React App(CRA) 비교
1. 개요
React 프로젝트를 시작할 때 대표적으로 사용되는 도구가 두 가지 있다.
- Vite: 빠른 개발 서버와 빌드 속도를 제공하는 차세대 빌드 도구
- Create React App(CRA): Webpack 기반의 초기 세팅 자동화 도구(오래된 표준)
2. 비교 표
| 항목 |
Vite |
Create React App(CRA) |
| 빌드 도구 |
ESBuild(Go 언어 기반) + Rollup |
Webpack |
| 개발 서버 시작 속도 |
매우 빠름 (필요한 파일만 로드) |
느림 (전체 번들 후 시작) |
| HMR(Hot Module Replacement) |
즉시 반영, 지연 거의 없음 |
반영 속도 느림 |
| 설정 변경 |
설정 파일(vite.config.js)로 쉽게 수정 가능 |
숨겨진 설정, 변경하려면 eject 필요 |
| 최초 로딩 속도 |
빠름 |
상대적으로 느림 |
| 지원 프레임워크 |
React, Vue, Svelte, Preact 등 다양 |
React 전용 |
| 출시 시기 |
2020년 (비교적 최신) |
2016년 (구세대) |
| 커뮤니티 추세 |
신규 프로젝트 표준처럼 채택 |
신규 채택 줄고 있음 |
3. Vite가 빠른 이유
- ESBuild 사용
- Go 언어로 구현되어 JavaScript로 구현된 Webpack보다 훨씬 빠른 변환 속도
- 부분 번들링
- 개발 시 필요한 모듈만 로드하여 브라우저에 전달
- 최적화된 HMR
4. CRA의 한계
- Webpack 기반으로 개발 서버 시작이 느림
- 설정 변경이 어려워 커스터마이징 제약이 많음
- 대규모 프로젝트에서는 빌드 시간과 리로딩 속도가 문제가 됨
5. 결론
- 신규 프로젝트 → Vite 사용 추천 (속도, 설정 편의성, 최신 트렌드)
- 기존 CRA 프로젝트 유지보수 → 그대로 사용 가능하지만, 마이그레이션을 고려해도 좋음
