[React] Create React App의 지원 종료 ⚠️

Create React App 소개와 지원 종료 소식

React는 웹 애플리케이션 개발에 사용되는 인기 있는 JavaScript 라이브러리이며,

React로 새 프로젝트를 시작할 때 지금까지 필자를 포함하여 많은 개발자들이 create-react-app(이하 CRA)을 사용해왔다.

 

CRA가 뭔지는 알고 있나?!

CRA는 복잡한 설정 없이 React 개발 환경을 구축해주는 도구로,
초기 설정의 번거로움 없이 바로 코드 작성을 시작할 수 있게 해주었다.

 

🚨하지만 최근 React 공식 팀은 CRA에 대한 지원을 종료한다고 발표했다.🚨

이는 단순히 도구 하나가 사라지는 것이 아니라, React 생태계의 큰 변화를 의미한다고 생각이 든다.

---

CRA의 한계점

CRA는 간편한 시작점을 제공했지만, 현대 웹 개발에서 요구되는 여러 기능들을 효과적으로 지원하지 못하는 한계를 가지고 있었다...

아래 세가지 문제점들을 살펴볼까??

 

라우팅(Routing) 문제

CRA는 자체적인 라우팅 시스템을 제공하지 않는다.

많은 개발자들이 단순한 페이지 전환을 위해 useState를 사용해왔는데,

이 방식은 URL이 변경되지 않아 북마크나 새로고침 시 상태가 유지되지 않는 문제가 있었다.

// CRA에서 상태로 관리하는 라우팅의 예시
function App() {
  const [currentPage, setCurrentPage] = useState('home');
  
  return (
    <div>
      <nav>
        <button onClick={() => setCurrentPage('home')}>Home</button>
        <button onClick={() => setCurrentPage('about')}>About</button>
      </nav>
      
      {currentPage === 'home' && <HomePage />}
      {currentPage === 'about' && <AboutPage />}
    </div>
  );
}

위 코드는 버튼 클릭으로 페이지를 전환하지만, URL은 변경되지 않기 때문에 사용자가 새로고침하면 상태가 초기화되어 항상 home 페이지로 돌아간다.

또한 북마크를 저장하거나 링크를 공유할 때도 문제가 발생한다.

 

데이터 불러오기(Data Fetching) 문제

CRA에서는 보통 useEffect와 fetch API를 사용하여 데이터를 불러온다.

이 방식은 간단하지만 네트워크 폭포수(network waterfall) 현상을 초래한다.

네트워크 폭포수란? 🤔
네트워크 폭포는 컴포넌트가 순차적으로 데이터를 페칭하는 과정에서 각각의 데이터 요청이 완료될 때까지 기다린 후에야 다음 데이터 요청을 시작하는 상황을 의미한다.
이는 데이터 요청이 병렬로 실행되지 않고 직렬로 실행되는 문제를 하며, 이로 인해 전체 데이터 로드 시간이 길어지게 된다.

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    async function fetchProducts() {
      setLoading(true);
      const response = await fetch('/api/products');
      const data = await response.json();
      setProducts(data);
      setLoading(false);
    }
    
    fetchProducts();
  }, []);
  
  if (loading) return <p>Loading...</p>;
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

이 코드에서는 컴포넌트가 마운트된 후에야 데이터 요청이 시작되고, 데이터를 받아올 때까지 로딩 상태를 표시한다.

하지만 여러 중첩된 컴포넌트가 각각 데이터를 불러와야 한다면, 상위 컴포넌트의 데이터가 완전히 로드된 후에야 하위 컴포넌트의 데이터 요청이 시작되는 연쇄적인 지연이 발생한다.

 

코드 분할 기능 결여

CRA로 만든 앱은 기본적으로 전체 애플리케이션 코드가 하나의 번들로 묶인다.

이 말은 즉슨, 초기 로딩 시간이 길어지는 원인이 된다는 것을 알 수 있다.

// CRA에서 코드 분할을 위해 React.lazy를 사용할 수 있지만 기본 설정은 아님
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </React.Suspense>
  );
}

React.lazy와 Suspense를 사용하여 코드 분할을 구현할 수 있지만, CRA에서는 이를 기본적으로 설정하지 않아 개발자가 직접 구현해야 한다...

 

그 외에도 접근성이나, 서버사이드 렌더링, 스트리밍과 같은 고급 기능들이 CRA에서는 구현하기 어렵거나 추가 설정이 필요하다.

---

커뮤니티 반응

GeekNews의 댓글을 보면 개발자 커뮤니티의 다양한 반응을 엿볼 수 있다.

 

몇몇 개발자들은 이미 CRA가 한계를 보이고 있었기 때문에 지원 종료는 자연스러운 흐름이라고 생각하고 있었다.

"이미 더 이상 쓸 이유가 없는 디프렉이죠"라는 의견이나

"관리 안할 거면 리포지토리 닫고 대안을 README와 npm에 표시하라고 그렇게 사람들이 건의했는데 한참을 무시하더군요. 드디어 사라져서 다행이네요"와 같은 반응은 CRA의 한계를 이미 체감하고 있던 개발자들의 목소리인 것 같다.

 

반면, "CRA 나름의 장점이 있는데 지원 종료 할 것 까지 있나 싶네요"나 "Cra가 하나의 번들로 묶는 게 괜찮았는데요..."와 같은 의견도 있어, CRA의 단순함과 쉬운 접근성을 선호하는 개발자들도 존재함을 알 수 있었다.

 

또한 "리액트 개발가이드에 CRA가 없어진지 한참인데, 이제 정말 지원까지 종료군요. Next나 Remix 같은 프레임워크에 의존해야하는 생태계가 되는것은 아쉽네요."라는 의견은 React 생태계가 프레임워크 중심으로 재편되는 것에 대한 아쉬움을 드러내는 것 같다.

필자도 이 부분에선 상당히 아쉬웠다..🥲

---

그럼 이제 어떻게 대응해야할까??

React 공식 문서에서는 CRA 대신 여러 프레임워크를 활용하여 React 앱을 개발할 것을 권장하고 있다.

개인적으로 단순히 도구를 바꾸는 것이 아니라, React 애플리케이션 개발 패러다임의 전환을 의미한다고 생각이 든다.

 

풀스택 프레임워크 - Next.js

Next.js는 React를 위한 풀스택 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 현대적인 웹 개발에 필요한 다양한 기능을 제공한다.

# Next.js 프로젝트 시작하기
npx create-next-app@latest

Next.js는 페이지 기반 라우팅과 함께 최근에는 App Router라는 새로운 라우팅 시스템을 도입했다.

이를 통해 더 효율적인 서버 컴포넌트 활용과 데이터 불러오기가 가능해졌다!!!

 

라우팅 라이브러리 - React Router v7

React Router는 React 애플리케이션에서 가장 인기 있는 라우팅 라이브러리다.

최신 버전인 v7은 Vite와 함께 사용하여 풀스택 React 프레임워크로 활용할 수 있다!!

# React Router 프로젝트 시작하기
npx create-react-router@latest

React Router는 URL 기반 라우팅을 제공하여 북마크나 새로고침 같은 웹 브라우저의 기본 기능을 자연스럽게 지원한다.

 

앱 개발 - Expo

네이티브 앱을 개발하고 싶다면 Expo를 사용할 수 있다.

Expo는 React Native를 기반으로 한 프레임워크로, Android, iOS, 웹에서 동작하는 네이티브 UI를 가진 앱을 만들 수 있다.

# Expo 프로젝트 시작하기
npx create-expo-app@latest

 

기타 프레임워크

React 공식 문서에서는 TanStack Start, RedwoodJS와 같은 다른 프레임워크들도 소개하고 있다.

이 프레임워크들은 아직 발전 중이지만 React의 풀스택 개발 비전을 실현하기 위한 옵션으로 제시되고 있다.

 

또한, 특별한 요구사항이 있거나 자신만의 프레임워크를 구축하고 싶다면, Vite, Parcel, RSbuild와 같은 도구를 사용하여 처음부터 React 앱을 설계할 수도 있을 것 같다.

# Vite로 React 프로젝트 시작하기
npm create vite@latest my-react-app -- --template react

---

CRA가 결국엔 지원종료까지 이어졌다는 소식 자체가 정말 아쉬운 것 같다.

더 develop하여 한계점을 보완시킬 수는 없었던 것일까?...