리액트는 컴포넌트를 통해 UI를 설계할 수 있는 자바스크립트 기반의 라이브러리입니다. 하지만 라이브러리는 단독으로 실행되지 않기 때문에, 실제로 프로젝트를 개발하려면 개발 환경을 설정해야 합니다.

리액트를 편리하게 시작하기 위해 등장한 도구가 바로 create-react-app(CRA)과 Vite(비트)입니다.

React가 바로 실행되지 않는 이유?

리액트는 단지 UI를 구성하기 위한 라이브러리일 뿐, HTML을 직접 생성하거나 브라우저에서 동작하도록 변환하는 기능을 자체적으로 제공하지 않습니다.

따라서 프로젝트를 개발하려면 다음과 같은 도구들이 필요합니다.

• JSX, ES6+ 문법을 일반 JS로 변환할 도구 (트랜스파일러)
  • 예: Babel
• 여러 자바스크립트 파일을 하나로 합쳐주는 도구 (번들러)
  • 예: Webpack, Rollup, ESBuild
• 코드 저장 시 브라우저에 자동 반영해주는 개발 서버 (HMR)
  • 예: Webpack Dev Server, Vite Dev Server

이러한 환경 구성을 직접 설정하려면 복잡한 작업이 필요합니다. 그래서 CRA나 Vite 같은 도구들이 초기 설정을 자동으로 해주는 역할을 합니다.

CRA (Create-React-App)

CRA는 Facebook(현 Meta)에서 공식 제공하는 React 프로젝트 스타터입니다.
명령어 한 줄로 React 프로젝트를 빠르게 시작할 수 있도록 도와주는 CLI 도구입니다.

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

• npx는 npm 패키지를 전역 설치 없이 실행하는 방식입니다.
• 위 명령어를 입력하면 리액트 개발에 필요한 환경이 자동으로 구성됩니다.

기본 폴더 구조

my-app/
├── public/         # 정적 파일(html, 이미지 등)
├── src/            # 실제 개발 파일(JSX, CSS 등)
│   ├── App.js
│   └── index.js
├── package.json    # 의존성 및 스크립트 정의
└── ...

CRA의 장점

1. 공식 도구로서 신뢰도 높음

• Facebook이 직접 관리하며, 실무와 커뮤니티에서도 널리 사용되어 검증됨

2. 많은 자료와 튜토리얼이 존재

• React 관련 입문 자료 대부분이 CRA 기반으로 설명되어 있어 학습에 유리함

3. 설정 없이 바로 개발 가능 (Zero-Config)

• Babel, Webpack, ESLint 등이 모두 자동 구성됨

4. TypeScript, Sass 등 옵션 사용 가능

• 추가 설정 없이도 명령어 한 줄로 TypeScript 환경을 구성할 수 있음
  

CRA의 단점

1. 초기 빌드 속도가 느림

• 내부적으로 Webpack을 사용하기 때문
• Webpack은 강력하지만 느릴 수 있음
• Webpack이란?
  • 여러 JS, CSS, 이미지 파일들을 하나로 묶고 최적화하여 브라우저에 전달하는 번들러입니다. 설정이 유연하지만 무겁고 복잡할 수 있습니다.

2. Hot Reload 속도가 느림

• 코드 저장 시 브라우저 반영까지 시간이 걸림
• Hot Module Replacement(HMR)?
  • 파일을 수정했을 때 전체 페이지를 새로고침하지 않고, 변경된 부분만 브라우저에 반영하는 기술입니다.

3. 커스터마이징이 어려움

• 설정 파일들이 숨겨져 있어 직접 수정이 어렵고, eject 명령어를 써야 설정을 노출할 수 있음
• 한 번 eject하면 복구가 어렵고 유지관리가 힘들어짐

4. 트렌드에서 점점 밀리는 중

• 최신 도구인 Vite에 비해 성능 면에서 느리고 무거움

Vite

Vite(비트)는 최근 각광받고 있는 프론트엔드 빌드 도구입니다.
Vue.js의 창시자인 Evan You가 개발했으며, React, Vue, Svelte 등 다양한 프레임워크를 지원합니다.

Vite의 핵심은 빠른 속도입니다. CRA보다 훨씬 빠르게 실행되며, 변경 사항 반영 속도도 매우 빠릅니다.

설치 명령어

npm create vite@latest
# 또는
yarn create vite

설치 과정 중 프롬프트에서:

• 프레임워크 선택: React
• 언어 선택: JavaScript 또는 TypeScript

cd my-vite-app
npm install
npm run dev

기본 폴더 구조

my-vite-app/
├── public/             # 정적 파일
├── src/
│   ├── App.jsx         # 루트 컴포넌트
│   └── main.jsx        # 진입점 (index.js 역할)
├── index.html          # 프로젝트 루트에 존재함
├── vite.config.js      # 설정 파일
├── package.json
└── ...

Vite의 장점

1. 빠른 실행 속도 (즉시 시작)

• 개발 서버 시작과 저장 반영 속도가 CRA에 비해 훨씬 빠름
• 내부적으로 ESBuild 사용
• ESBuild란?
  • JavaScript/TypeScript 파일을 매우 빠르게 변환해주는 초고속 빌드 도구입니다.
  • C++이 아닌 Go 언어로 작성되어 CRA보다 수십 배 빠르게 동작합니다.

2. 빠른 반응 속도 (HMR)

• 저장 즉시 브라우저에 반영됨
• 대규모 프로젝트에서도 지연 없이 개발 가능

3. 설정이 투명하고 커스터마이징 쉬움

• vite.config.js를 통해 Rollup 기반 설정을 직접 수정 가능
• 설정을 쉽게 ‘볼 수 있고’, ‘바꿀 수 있고’, ‘동작 경로가 명확’함

4. React 외에도 다양한 프레임워크 지원

• React, Vue, Svelte 등 모두 지원하는 범용 도구

표: CRA vs Vite 비교 정리

항목	CRA	Vite
제작사	Meta (공식)	Evan You (Vue 창시자)
개발 서버	Webpack Dev Server	Vite Dev Server (ESBuild)
HMR 속도	느림	매우 빠름
번들링 방식	Webpack	Rollup
설정 파일 노출	X (eject 필요)	O (기본 제공)
사용 난이도	쉬움	쉬움 + 커스터마이징 쉬움
학습 자료	많음	증가 중
성능	무거움	가벼움
프레임워크 확장	불가능	React, Vue, Svelte 등 지원