React Vite vs CRA : Vite를 공부해보자

React로 프로젝트를 시작할 때 예전에는 거의 무조건 **Create React App(CRA)**를 사용했지만,

요즘은 많은 개발자들이 Vite로 넘어가고 있는 추세

그래서 Vite와 CRA가 무엇인지, 어떤 차이가 있는지, 그리고 왜 Vite를 선택하게 되는지 개념 위주로 정리 해보기

---

React Vite란?

 

 

Vite는 빠르고 가벼운 프론트엔드 빌드 도구
최신 브라우저의 ESM(ECMAScript Modules)를 적극적으로 활용해서, 매우 빠른 개발 서버와 최적화된 번들링을 제공

React 프로젝트에서 Vite를 사용하면:

• 개발 서버가 거의 바로 실행되고,
• 코드 수정 시 **HMR(Hot Module Replacement)**로 변경 사항이 즉시 화면에 반영되며,
• 빌드(배포용 번들) 속도도 매우 빠르게 처리됩니다.

 

✅ Vite의 주요 특징

• 빠른 개발 서버
  • Vite는 소스를 모두 번들링해놓고 시작하는 방식이 아니라,
  • 요청된 모듈만 ESM 형태로 즉시 제공하는 방식이라 서버 시작이 매우 빠릅니다.
• Hot Module Replacement (HMR)
  • 코드가 수정되면 해당 모듈만 다시 로드하여 UI를 업데이트합니다.
  • 브라우저 새로고침 없이도 화면이 즉시 반영되어, 개발 흐름이 끊기지 않습니다.
• 빠른 번들링
  • Vite는 내부적으로 esbuild를 사용해 번들링 속도를 크게 향상시켰습니다.
  • 대규모 애플리케이션에서도 빌드 시간이 상대적으로 짧습니다.

 

Vite를 사용하는 이유

 

기존의 Create React App(CRA)에 비해 더 빠르고 가벼운 개발 환경을 제공
특히 프로젝트 규모가 커질수록, Vite의 장점이 더 뚜렷하게 드러난다고 한다.

 

💡 Vite를 선택하는 주요 이유

1. 빠른 초기 빌드
   • CRA(Webpack 기반)는 개발 서버를 시작하기 전에 프로젝트 전체를 번들링
   • Vite는 필요한 모듈만 즉시 제공하기 때문에 개발 서버가 매우 빠르게 실행
2. 빠른 HMR
   • 변경된 부분만 다시 로드해서 반영
   • 페이지 전체를 새로고침하지 않아도 UI 바로 확인 가능
3. 최적화된 빌드 성능
   • esbuild를 사용해 번들링 속도가 매우 빠르다
   • 특히 컴포넌트가 많고 파일이 많은 프로젝트에서 빌드 체감 속도가 크게 차이 난다.

 

Create React App(CRA)란?

 

React 프로젝트를 쉽게 시작할 수 있도록 도와주는 CLI(Command Line Interface) 도구

 

 

🔍 CLI란?
Command Line Interface의 약자

터미널/명령 프롬프트에서 사용자가 텍스트 명령어를 입력해서 프로그램을 실행·제어하는 인터페이스

 

# 사용예시

npx create-react-app my-app 같은 명령어

 

 

 

 

✅ CRA의 주요 특징

• 기본 설정 제공
  • 기초적인 설정이 모두 포함되어 있어,
  • 설정 없이도 create-react-app 한 번으로 React 프로젝트를 시작할 수 있다.
• React 개발 환경 패키지화
  • 개발 서버, 빌드, 테스트 환경 등이 미리 구성되어 있어
  • “설정보다 개발에 집중”할 수 있는 입문용/기본 템플릿 역할

 

CRA의 한계와 Vite의 개선점

 

❗ CRA의 한계

• 느린 빌드 속도
  • Webpack 기반이라 프로젝트가 커질수록 빌드 및 재빌드 시간이 길어진다.
  • 변경 사항이 많을 때마다 기다리는 시간이 점점 늘어남
• 느린 HMR
  • 코드 수정 후 브라우저 반영까지 시간이 걸림
  • 개발 도중 “수정 → 저장 → 확인”의 리듬이 끊길 수 있다.
• 대규모 애플리케이션에서의 생산성 저하
  • 파일 수가 많고 로직이 복잡한 프로젝트에서는 Webpack 빌드가 개발 속도를 방해할 수 있다.
  • 커스터마이징이 필요해 eject를 하게 되면,
    • 숨겨져 있던 설정 파일들이 한 번에 노출되고
    • 관리해야 할 설정이 많아져 복잡도가 올라간다.

 

✅ Vite의 개선점

• 더 빠른 개발 경험
  • ESM 기반으로 필요한 부분만 로드하기 때문에 초기 로딩과 HMR 속도가 CRA보다 훨씬 빠름
• 최적화된 번들링
  • esbuild + Rollup 조합으로 빌드 성능을 최적화
• 유연한 설정
  • vite.config.ts/js 한 파일로 설정을 관리할 수 있고,
  • 플러그인 시스템이 단순하면서도 확장성이 좋아 커스터마이징이 쉽다.

 

Vite vs CRA 한눈에 비교

 

	Vite	CRA(Create React App)
빌드 도구	esbuild(개발) + Rollup(빌드)	Webpack
개발 서버 시작 속도	매우 빠름, 프로젝트 커져도 체감 좋음	프로젝트 커질수록 점점 느려짐
HMR 속도	변경된 모듈만 교체, 빠르고 부드러움	상대적으로 느림
설정/커스터마이징	vite.config로 비교적 간단하게 제어	깊은 설정 변경 시 eject 필요
타입스크립트 지원	템플릿 선택으로 바로 사용 가능	TypeScript 템플릿 별도 제공
기본 구조	심플하고 가벼운 구조	구조는 단단하지만 다소 무거운 편
주 사용 용도	신규 프로젝트, 빠른 개발 환경	기존 레거시, 학습용 템플릿

 

 

 

정리

• CRA는 “React 입문용 템플릿”으로서는 의미가 있지만, 프로젝트 규모가 커질수록 빌드 속도와 HMR 속도에서 한계가 있다.
• Vite는 빠른 개발 서버, 빠른 빌드, 유연한 설정 덕분에새로운 React 프로젝트를 시작할 때 더 적합한 선택지가 되고 있다.