yoora's lab

Create React App(CRA)은 2016년에 Facebook(현 Meta)에서 출시된 도구로, React 앱을 빠르게 bootstrapping(초기 설정) 할 수 있게 해주는 CLI(Command Line Interface)였습니다.

npm create-react-app my-app명령어 하나로 프로젝트를 생성할 수 있었고, Webpack, Babel 같은 빌드 도구 설정을 자동화해 초보자들에게 인기를 끌었습니다만 시간이 지나면서 몇가지 한계가 드러났습니다.

• 성능문제 : 빌드와 핫 리로딩 속도가 느리고, 대규모 프로젝트에서 효율이 떨어졌습니다.
• 복잡한 초기 설정 : 불필요하게 많은 의존성을 포함하면서도, 최신 웹 기능(예: Server-Side Rendering, Static Site Generation)을 추가하기가 어려웠습니다.
• 유지보수의 한계 : React 18의 concurrent features 같은 최신 기능을 완벽히 지원하지 못했고, React 팀은 점차 프레임 워크 중심의 개발 방식으로 방향을 전환했습니다.

이러한 이유로 React 팀은 CRA를 deprecated 처리하고, 대신 더 유연하고 성능 좋은 도구들을 권장하고 있습니다.

React 공식 문서에 따르면, 새로운 React 프로젝트를 시작할 때는 CRA 대신 아래와 같은 도구로 시작하는 것이 좋다고 합니다.

1. Vite : 가장 간단하고 빠른 대안

• 설치

  JavaScriptbashnpm create vite@latest my-react-app -- --template react

  TypeScriptbashnpm create vite@latest my-react-app -- --template react-ts

• 실행

  bashcd my-react-app
  npm install
  npm run dev

• 장점 : 매우 빠른 빌드 속도와 핫 모듈 리플레이스먼트(HMR), 최소화된 설정

2. Next.js : 풀스택 프레임워크, SSR/SSG 지원

• 설치

  JavaScriptbashnpx create-next-app@latest my-next-app

• 특징 : Server-Side Rendering(SSR), Static Site Generation(SSG), API 라우팅 지원
• 장점 : SEO 친화적, 배포가 쉽고 React 최신 기능 통합

3. Remix : 라우팅 중심 풀스택 프레임워크

• 설치

  JavaScriptbashnpx create-remix@latest my-remix-app

• 특징 : 데이터 페칭과 라우팅 최적화
• 장점 : 서버 중심 개발에 유리, 빠른 전환

4. Parcel : 제로 컨피그 빌드 도구

• 설치

  JavaScriptbashnpm init parcel my-app

• 특징 : 별도의 설정 없이 빠르게 시작 가능

• 순수 React 앱만 빠르게 만들고 싶다 -> Vite
• SSR/SSG, SEO, 풀스택 기능이 필요하다 -> Next.js
• 라우팅과 데이터 페칭 중심 개발을 원한다 -> Remix
• 최소 설정 + 가볍게 테스트 -> Parcel