2025년 2월 14일, React 공식 블로그에 "Sunsetting Create React App"이라는 제목의 글이 게시되었어요. 해당 글에서는 다음과 같은 내용을 전하며 Create React App(CRA)의 지원 종료를 공식적으로 발표했어요.

"Today, we’re deprecating Create React App for new apps and encouraging existing apps to migrate to a framework or a build tool like Vite, Parcel, or RSBuild."

즉, 앞으로 새로운 프로젝트에서는 CRA를 사용하지 않도록 권장하며, 기존 애플리케이션도 Vite, Parcel, RSBuild와 같은 빌드 도구나 적절한 프레임워크로의 마이그레이션을 유도하고 있어요.

CRA는 오랫동안 React 프로젝트를 빠르게 시작할 수 있는 도구로 사랑받았지만, 최근에는 더 나은 대안들이 많아지면서 점점 사용이 줄어들었어요. 이번 글에서는 CRA의 종료 이유와 앞으로 React 프로젝트를 시작하는 새로운 방법을 소개하려고 해요.

Create React App(CRA)란?

CRA의 종료 이유를 설명하기 전에 먼저 CRA가 무엇인지 짚고 넘어가려고 해요. CRA는 단 한 줄의 명령어로 React 애플리케이션을 손쉽게 생성할 수 있도록 도와주는 CLI 도구였어요.

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

위 명령어만 실행하면 번들러(webpack), 바벨(Babel), ESLint, Jest 등 기본적인 개발 환경이 설정된 React 프로젝트가 자동으로 생성되었어요. 하지만 최근에는 CRA의 단점들이 점점 더 부각되면서 개발자들이 다른 대안을 찾기 시작했어요.

왜 Create React App이 종료되었을까?

CRA는 React 프로젝트를 쉽게 시작할 수 있도록 여러 도구를 한데 모아 표준 구성으로 제공하며 개발자들에게 편리함을 제공했지만 시간이 지나면서 몇 가지 한계가 드러났어요.

1. 🐢 느린 빌드 속도

CRA는 webpack을 기반으로 동작하는데, webpack의 번들링 속도가 느려지면서 개발 속도가 저하되는 문제가 있었어요. 최근 등장한 Vite, Parcel, Rsbuild 같은 최신 번들러들이 CRA보다 훨씬 빠른 속도를 제공하면서 CRA의 단점이 두드러졌어요.

2. ⏳ 최신 웹 트렌드 반영 부족

CRA는 최신 ESM(ES Modules) 방식이 아닌 기존 번들러(webpack)를 사용했어요. 반면, Vite는 ESBuild를 활용하여 즉각적인 개발 서버 실행이 가능하고, Next.js 같은 프레임워크는 서버 컴포넌트(Server Components) 같은 새로운 기능을 적극적으로 지원하고 있어요.

3. 📉 라우팅, 데이터 페칭, 코드 분할 등의 기능 부족

CRA는 프로젝트의 기본적인 구조만 제공할 뿐, 라우팅, 데이터 페칭, 코드 스플리팅 등 프로덕션 환경에서 필수적인 기능이 기본 제공되지 않았어요. 따라서 React Router, SWR, React Query 같은 외부 라이브러리를 직접 설정해야 했어요. 반면, Next.js, Remix 같은 프레임워크는 이러한 기능을 기본적으로 제공해요.

Create React App 대신 사용할 새로운 도구들

이제 CRA가 종료된 만큼, React 프로젝트를 설정할 때 고려할 수 있는 새로운 대안들을 소개할게요.

1. Vite: 가장 빠르고 가벼운 번들러

Vite는 빠른 개발 환경과 간단한 설정을 제공하는 최신 React 프로젝트 생성 도구예요. ESBuild를 활용하여 CRA보다 개발 서버가 최대 10배 이상 빠르게 실행돼요.

Vite로 React 프로젝트 시작하기

npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install
npm run dev

Vite의 장점

CRA보다 훨씬 빠른 빌드 및 개발 서버 속도
ESM(ES Modules) 지원으로 최적화된 성능 제공
React 공식 문서에서도 기본으로 추천하는 도구

2. Next.js: 서버 렌더링(SSR)과 정적 사이트 생성(SSG) 지원

Next.js는 단순한 React 앱을 넘어서, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), Incremental Static Regeneration(ISR) 등 다양한 기능을 지원하는 프레임워크예요.

Next.js의 장점

SEO 최적화(SSR 및 SSG 지원)
파일 기반 라우팅 시스템으로 간편한 경로 관리
서버 컴포넌트 지원으로 렌더링 최적화

Next.js로 React 프로젝트 시작하기

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

3. Remix: 풀스택 React 프레임워크

Remix는 서버 중심의 React 프레임워크예요. Next.js와 비슷하지만, 서버 액션(Server Actions)과 최적화된 데이터 패칭 방식을 제공하여 퍼포먼스가 뛰어나요.

Remix로 React 프로젝트 시작하기

npx create-remix@latest my-remix-app
cd my-remix-app
npm install
npm run dev

Remix의 장점

서버 중심 아키텍처로 데이터 로딩 최적화
SEO와 성능을 동시에 개선할 수 있음
Form 기반의 데이터 처리 방식 지원

4. Parcel: 설정 없이 빠르게 프로젝트 시작

Parcel은 CRA처럼 설정이 거의 필요 없는 번들러예요. 하지만 CRA보다 빌드 속도가 빠르고 자동 코드 스플리팅 같은 최적화 기능이 내장되어 있어요.

Parcel로 React 프로젝트 시작하기

mkdir my-parcel-app
cd my-parcel-app
npm init -y
npm install react react-dom
npm install --save-dev parcel

Parcel의 장점

설정 없이 바로 사용 가능
빠른 번들링 속도
Tree shaking 및 코드 스플리팅 자동 적용

마무리

CRA는 React 프로젝트를 쉽게 시작할 수 있도록 도와준 좋은 도구였어요. 저 역시 개발자로 취업을 준비하며 가장 많이 활용했던 CLI 중 하나였고, 처음 React를 배울 때 CRA가 없었다면 학습 과정이 훨씬 더 어려웠을 거라고 생각해요.

하지만 기술이 발전하면서 CRA의 한계가 점점 명확해졌고, 더 나은 대안들이 등장했어요. 이제는 Vite, Next.js, Remix, Parcel 같은 최신 도구를 활용하여 React 프로젝트를 시작하는 것이 더 좋은 선택이 되었어요.

정리하자면...

빠른 개발 환경이 필요하면? → Vite
SEO 최적화 & 서버 렌더링이 필요하면? → Next.js
최신 웹 아키텍처를 활용하고 싶다면? → Remix
설정 없이 간단한 프로젝트를 시작하고 싶다면? → Parcel

CRA를 떠나보내는 것이 아쉽긴 하지만, React 생태계는 더 빠르게 발전하고 있어요. 이제 CRA를 벗어나, 더 빠르고 최적화된 개발 환경에서 React 프로젝트를 개발해 보세요! 🚀

Create React App 시대의 끝

Table of contents