React 설치 방식 3가지 비교 가이드

React로 웹 앱을 개발하고 싶지만, 어떻게 시작해야 할지 고민이라면 이 글이 도움이 될 거예요. 아래 세 가지 설치 방식을 비교하면서, 나에게 맞는 시작점을 쉽게 찾을 수 있습니다.

목차

• 1. create-react-app (CRA)
• 2. Vite
• 3. 직접 설치 (Custom Setup)
• 설치 방식 요약 비교

---

1. create-react-app (CRA)

create-react-app은 가장 널리 알려진 React 시작 도구입니다. Facebook에서 공식으로 지원하며, webpack, Babel, ESLint 등의 설정이 모두 포함되어 있어 빠르게 개발을 시작할 수 있어요.

 

설치 명령어:

npx create-react-app my-app

 

위 명령어를 실행하면 my-app 폴더에 필요한 파일과 디렉토리가 자동으로 생성됩니다:

my-app/
├── public/
├── src/
│   └── App.js
├── package.json

 

개발 서버 실행:

cd my-app
npm start

 

이후 브라우저에서 http://localhost:3000으로 자동 접속되며, 첫 화면을 확인할 수 있습니다.

CRA 장점

• 초보자에게 최적화된 구조
• 별도 설정 없이 바로 개발 가능
• 공식 지원, 커뮤니티도 활발

CRA 단점

• 설정이 숨겨져 있어 커스터마이징 어려움
• 초기 번들 사이즈가 상대적으로 큼

---

2. Vite

Vite는 최근 빠르게 인기를 얻고 있는 React 번들링 도구입니다. 특히 빠른 실행 속도와 HMR(핫 모듈 교체) 덕분에 프론트엔드 개발 경험이 매우 좋아집니다.

 

설치 명령어:

npm create vite@latest

 

설치 과정에서 React 템플릿을 선택하면, 필요한 설정이 자동으로 구성됩니다. 이후 아래 명령어로 프로젝트를 시작하세요:

cd my-app
npm install
npm run dev

 

Vite 장점

• CRA보다 훨씬 빠른 실행 속도
• 간단한 설정으로 개발 가능
• 최신 개발 트렌드 반영

Vite 단점

• 초보자에게는 생소할 수 있음
• Firebase나 Tailwind 등 외부 도구 설정을 직접 해야 함

저 같은 경우, 초기에는 CRA로 시작해 연습했고, 이후 프로젝트 규모가 커지거나 공통 설정이 필요할 때 Vite로 전환을 고려하고 있습니다.

---

3. 직접 설치 (Custom Setup)

직접 설치는 React와 ReactDOM만 설치하고, webpack, Babel, ESLint 등을 모두 직접 구성하는 방식입니다.

설치 명령어 예시:

npm install react react-dom

 

이후 webpack 설정, Babel 프리셋, HTML 템플릿, ESLint 설정 등을 직접 구성해야 합니다.

직접 설치 장점

• 모든 설정을 자유롭게 구성 가능
• 최적화된 빌드 구조 설계 가능

직접 설치 단점

• 설정이 복잡하고 시간이 많이 걸림
• 초보자에게는 진입장벽이 높음

이 방식은 개인 프로젝트보다는 기업용 프로젝트나 고급 설정이 필요한 환경에서 사용됩니다.

---

설치 방식 요약 비교

설치 방식	설명	추천 대상	명령어
create-react-app	초보자도 쉽게 설치, 설정 포함	입문자, 빠른 시작	npx create-react-app my-app
Vite	빠른 속도와 간단한 설정	중급 이상 개발자	npm create vite@latest
직접 설치	React만 설치, 설정 직접 구성	고급자, 설정 커스터마이징 필요 시	npm install react react-dom

---

마무리하며

React 설치 방식은 다양하지만, 어떤 것이 '최고'인지는 없습니다. 자신의 개발 환경과 실력, 목적에 따라 선택하면 됩니다. 예를 들어 저는 첫 번째 프로젝트는 CRA로 시작했고, 이후 Firebase, TailwindCSS를 연동하며 더 나아가 Vite와 직접 설치 방식도 실험하고 있습니다.

 

React는 분명 처음에 진입장벽이 있지만, 하나씩 익히다 보면 충분히 따라갈 수 있어요. 처음부터 너무 어렵게 가지 말고, 간단하게 시작해서 점점 확장해보세요.

 

도움이 되셨다면 댓글이나 공감 남겨주세요. 다음 포스팅에선 CRA 프로젝트에 TailwindCSS와 Firebase를 연동하는 실습 예제를 다룰 예정입니다.