1. 기존까지 사용했던 라우팅 관리의 문제점

현재 아래와 같이 App.jsx에서 모든 라우팅을 관리하고 있습니다. 아래처럼 라우팅 페이지를 관리했을 때 다음과 같은 불편함을 느꼈습니다.

1. App.jsx은 엔트리 포인트로 폴더 구조 및 App전체에 사용되고 있는 기능을 보여야 한다고 생각합니다. 하지만 App.jsx에서 모든 페이지 관련 라우팅을 관리하다보니 프로젝트에서 전체적으로 사용하는 기능을 한 눈에 파악하기 어려웠습니다.
2. 아래와 같이 페이지가 5개만 넘어가도 가독성이 좋지 못함을 알 수 있습니다.
3. 중첩된 라우터가 무엇인지, hoc(publicRouter, privateRotue)가 적용된 컴포넌트는 무엇인지 한 눈에 파악하기 어렵습니다.

// App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { ROUTES } from "./constant";
import Layout from "./Layout";
import Main from "./pages/Main";
import About from "./pages/About";
import Fruits from "./pages/Fruits";
import Apple from "./pages/Apple";
import Banana from "./pages/Banana";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={ROUTES.HOME} element={<Layout />}>
          <Route index element={<Main />} />
          <Route path={ROUTES.ABOUT} element={<About />} />
          <Route path={ROUTES.FRUITS.INDEX} element={<PublicRoute Component={Fruits} restricted={restricted} />}>
            <Route path={ROUTES.FRUITS.APPLE} element={<PrivateRtoue Component={Apple} restricted={restricted} />} />
            <Route path={ROUTES.FRUITS.BANANA} element={<Banana />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// Layout.tsx
import { Link, Outlet } from "react-router-dom";
import { ROUTES } from "./constant";

const Layout = () => {
  return (
    <div>
      <ul style={{ display: "flex", flexDirection: "column" }}>
        <Link to={ROUTES.HOME}>HOME</Link>
        <Link to={ROUTES.ABOUT}>ABOUT</Link>
        <Link to={ROUTES.FRUITS.INDEX}>FRUITS</Link>
        <Link to={ROUTES.FRUITS.APPLE}>APPLE of FRUITS</Link>
        <Link to={ROUTES.FRUITS.BANANA}>BANANA of FRUITS</Link>
      </ul>
      <Outlet />
    </div>
  );
};

export default Layout;

// Fruits.tsx
import { Outlet } from "react-router-dom";

const Fruits = () => {
  return (
    <div>
      <h1>Fruits</h1>
      <Outlet />
    </div>
  );
};

export default Fruits;

• 수정 전 App.tsx (😅 주의 : 가독성에 눈이 아플 수 있습니다)

2. 목표

• [ ] /src/routes에서 객체로 routes 구조를 관리하기
• [ ] 중첩된 라우터는 한 눈에 알아볼 수 있도록 관리하기

3. 결과 예시

3-1. /src/routes에서 객체로 routes 구조를 관리하기

react-router-dom-v6에서 제공하는 useRoutes를 활용해 /src/routes/index.jsx에서 모든 라우팅을 관리하도록 했습니다.

const routes = [
  {
    path: ROUTES.HOME,
    element: <Main />
  },
  {
    path: ROUTES.ABOUT,
    element: <About />
  },
  {
    path: ROUTES.FRUITS.INDEX + ROUTES.ALL,
    element: <FruitRouter />
  }
];

const Router = () => {
  const element = [
    {
      element: <Layout />,
      children: routes
    }
  ];
  return useRoutes(element);
};

3-2. private라우터와 public라우터 등 기능에 따라 구분하기

이전에는 <Route>컴포넌트 마다 아래와 같이 Public인지 Private인지 element를 감싸는 형태로 코드를 작성했습니다.