CRA의 역할

리엑트 공식 문서에서 CRA의 공식적인 지원 중단을 발표했다.

https://react.dev/blog/2025/02/14/sunsetting-create-react-app

CRA가 등장하기 이전에는 개발자들이 React 및 React-DOM 설치 Webpack과 Babel 설정 스크립트 설정을 직접했었지만, 2016년 이후에 등장한 CRA가 등장하고, 간단한 명령어 npx-create-react-app 을 통해서 리엑트 프로젝트를 간단하게 설정해 줄 수 있다.

CRA가 지원이 중단된 이유

공식문서에 따르면 높은 성능을 요구하는 앱 들에 대한 요구들이 증가하면서 더 이상 CRA가 사용되기 어려운 상황에 놓였고, 또 현재 CRA에 대한 유지보수를 하고 있는 개발자가 없기 때문에 **지원중단(deprecate)**이 되었다는 말이 있다. 문서에서 꼽은 대표적인 한계점은 아래와 같다.

CRA의 한계점

그렇다면 왜 CRA의 한계점은 어떤 것이 있었을까?

1. 라우팅

CRA에는 구체적인 라우팅 전략이 없다고 한다. 라우팅을 비슷하게 구현하는 방법은 아래의 코드처럼 state를 이용하는 방법이 있긴 하지만, URL에 변화를 주지 못하여 앱 내 특정 페이지에 직접 접근하거나 링크를 공유하는 것이 불가능하다는 문제점있다.

import {useState} from 'react';

import Home from './Home';
import Dashboard from './Dashboard';

export default function App() {
  // ❌ Routing in state does not create URLs
  const [route, setRoute] = useState('home');
  return (
    <div>
      {route === 'home' && <Home />}
      {route === 'dashboard' && <Dashbord />}
    </div>
  )
}

이런 방식으로 구현을 하는 것인데 예를 들면 http://localhost:3000/home , http://localhost:3000/dashboard 같은 특정 라우트로의 이동이 불가능하다는 것이다.

물론 방법이 존재하지 않는 것은 아니다. ChatGPT는 window.location.hash를 state에 넣어서 라우팅을 하는 방법을 제시하고 있다. 하지만 이 방법은 초보자라면 쉽게 엄두를 낼 수 없을뿐더러, 중첩라우팅괴 id를 파라미터로 받는 동적 경로 생성이 어렵다.

• 코드보기

그때는 몰랐지만 그렇기 때문에 React를 입문할 때 react-router를 기본적으로 설치하고 사용했었다.

→ Next.js는 편리하게도 파일구조 기반 라우팅을 제공한다.

2. 데이터 페칭

CRA는 데이터 페칭에서도 문제를 보여준다. 대부분의 경우 fetch를 useEffect 안에 넣어 사용하게 되는데, 이 경우 컴포넌트가 렌더링된 후 데이터 페칭이 시작되므로 Network Waterfall이 발생한다.