React경로"Route Objects API" 방식

React에서 경로를 설정하는 방법중 "Route Objects API"에 대하여 설명하겠다.

"Route Objects API" 구조의 장점

여러 방법이 있지만 "Route Objects API"를 선택한 이유는

• 한페이지에서 모든 경로를 볼수 있어 코드 가독성이 좋다.
• 확장성이 좋아 페이지가 많아져도 관리하기 쉽다.
• 특정 페이지에서 경로를 수정할수 있어 유지보수가 용이하다.
  이러한 이유로 페이지가 많은 프로젝트에서는 사용하면 좋은거 같다.

1. 코드 구조 분석

1 라우터 경로 관리 (ROUTER_PATHS.js)

const ROUTER_PATHS = {
  MAIN_PAGE: '/',
  LOGIN_MAIN: '/loginMain',
};

export default ROUTER_PATHS;

• 경로(path)를 별도의 파일로 분리해서 경로 변경이 필요할 때 한 곳에서 관리 가능
• 오타 방지 및 일관성 유지 가능

실제 사용 코드

2 라우트 정보 배열 (routes.js)

import LoginMain from "../domains/login/main/LoginMain";
import MainPage from "../domains/main/main/MainPage";
import ROUTER_PATHS from "./RouterPath";

const routes = [
  {
    path: ROUTER_PATHS.MAIN_PAGE,
    element: <MainPage />,
  },
  {
    path: ROUTER_PATHS.LOGIN_MAIN,
    element: <LoginMain />,
  },
];

export default routes;

• routes 배열을 만들어서 모든 경로 정보를 한 곳에서 관리

• ROUTER_PATHS를 활용해서 경로 변경 시 한 곳만 수정하면 됨

• element를 통해 각 페이지 컴포넌트를 바로 연결

실제 사용 코드

---

3 라우터 설정 (AppRoutes.js)

import { Route, Routes } from 'react-router-dom';
import routes from './routes';
import Layout from './Layout';

const AppRoutes = () => {
  return (
    <Layout>
      <Routes>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.element} />
        ))}
      </Routes>
    </Layout>
  );
};

export default AppRoutes;

• routes.map()을 사용해서 라우트 자동 생성
• Layout을 감싸서 모든 페이지에서 Header와 Footer 유지
• 새로운 페이지 추가 시 routes.js만 수정하면 됨 → 확장성 좋음

실제 사용 코드

4 레이아웃 (Layout.js)

import Header from '../components/web/Header';
import Footer from './../components/web/Footer';

const Layout = ({ children }) => {
  return (
    <div className='flex flex-col min-h-screen'>
      <Header />
      <main className='flex-grow'>{children}</main>
      <Footer email='bookjob@gmail.com'/>
    </div>
  );
};

export default Layout;

• flex-grow를 사용해서 main이 차지할 수 있는 만큼 공간 확보
• min-h-screen을 설정해서 항상 화면 전체를 채움
• Footer를 하단에 고정

실제 사용 코드

---

사용하기도 편하고 한번 적용하면 관리하기 편해서 좋다.