라우팅과 프로젝트 구조

import { lazy, Suspense } from "react";

const OrderListPage = lazy(() => import("./pages/OrderListPage"));
const StatisticsPage = lazy(() => import("./pages/StatisticsPage"));

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/orders" element={<OrderListPage />} />
        <Route path="/statistics" element={<StatisticsPage />} />
      </Routes>
    </Suspense>
  );
}

차트나 편집기처럼 무거운 라이브러리를 쓰는 화면부터 분리하면 효과가 큽니다. fallback을 빈 화면으로 두면 전환할 때마다 깜빡이므로 레이아웃을 유지하는 형태로 만듭니다.

src/
├─ features/
│  ├─ order/
│  │  ├─ components/     주문 화면 전용 컴포넌트
│  │  ├─ hooks/          주문 관련 훅
│  │  ├─ api/            주문 API 호출
│  │  └─ types.ts
│  └─ member/
├─ shared/               여러 기능이 함께 쓰는 것
│  ├─ components/        버튼, 모달 등 공용 UI
│  ├─ hooks/
│  └─ lib/
├─ pages/                라우트에 연결되는 화면
└─ app/                  전역 설정, 라우터, 프로바이더

처음부터 완벽한 구조를 만들 필요는 없습니다. 기능이 늘면서 자연스럽게 나누되, 공용으로 올릴 기준만 팀이 합의해 두면 됩니다.