background
React5분

CRA vs VITE

2024년 11월 16일

⚔️ CRA vs Vite

React 프로젝트를 생성할 때 가장 많이 사용하는 도구 두 가지

👉 Create React App (CRA) vs Vite

🏗️ CRA (Create React App)

  • Meta(구 Facebook)에서 만든 기본적인 React 프로젝트 생성기
  • 내부적으로 Webpack을 사용하여 번들링
  • 설정이 자동화되어 있어 초심자에게 익숙
  • 프로젝트 구조와 빌드 환경이 비교적 무거움

⚡ Vite

  • 차세대 프론트엔드 빌드 도구
  • ESBuild + Rollup 기반으로 CRA보다 훨씬 빠른 번들링 속도 제공
  • *모듈 단위 핫 리로딩(HMR)**을 통해 개발 중 빠른 반영
  • React 뿐만 아니라 Vue, Svelte 등 다양한 프레임워크 지원

🧠 CRA vs Vite 비교

항목CRA (Create React App)Vite
기본 번들러WebpackESBuild + Rollup
프로젝트 생성 속도느림매우 빠름 ⚡
핫 리로딩 속도느림빠름
빌드 속도느림빠름
설정 커스터마이징어렵거나 eject 필요쉬움 (Vite 설정 파일로 가능)
React 지원기본 지원Plugin 형태로 React 사용
사용성보편적, 안정성최신 트렌드, 경량화

🧪 JavaScript (.js) vs JSX (.jsx)

항목.js.jsx
확장자 의미JavaScript 파일JavaScript + XML
사용 목적일반 JS 코드React 컴포넌트에서 JSX 문법 사용 시
JSX 사용❌ 기본 JS 문법만✅ <div>안녕</div> 같은 JSX 문법 사용 가능
브라우저 이해도브라우저가 인식브라우저는 JSX 인식 불가 → Babel이 변환해줌
예시function test() {}const App = () => <div>Hello</div>

✅ JSX는 JavaScript 확장 문법으로, HTML 태그를 JS 코드처럼 사용할 수 있게 해주는 문법이다

따라서 React 컴포넌트는 .jsx 확장자를 사용하는 것이 권장됨.

🛠️ CRA vs Vite 명령어 비교

목적CRA 명령어Vite 명령어
프로젝트 생성npx create-react-app my-appnpm create vite@latest my-app -- --template react
설치 이동cd my-app && npm installcd my-app && npm install
개발 서버 실행npm startnpm run dev
빌드npm run buildnpm run build
테스트npm test별도 설정 필요 (vitest, jest 등 수동 설정)

✍️ 정리 요약

구분CRAVite
속도느림빠름 ⚡
설정자동화 / 복잡간단 / 설정 유연
사용 기술WebpackESBuild
JSX 파일기본 지원 (.js도 가능).jsx 또는 .tsx 권장
권장 대상React 입문자, 안정적 개발최신 트렌드에 맞는 개발, 빠른 피드백 원할 때

태그

#React
이전 글

JSX

다음 글

React란?