프론트엔드 기능별 라우터 분리 - routes/

 

프로젝트를 진행하면서 점점 늘어나는 기능들을 더 효율적으로 관리하기 위해 App.js에 있는 라우터를 분리해주는 작업이 필요하다. 모듈화해서 나누면 각 기능들을 독립적으로 관리할 수 있고 가독성도 좋아져 체계적이다. 

공동 처리나 확장시에도 적용하기가 쉬워진다.

 

 

 

| 프론트엔드 라우터 구조

 

src/
  routes/
    AuthRoutes.js
    PostRoutes.js
    DashboardRoutes.js
    index.js ← App.js에 연결되는 최상위 통합 라우터

 

 

| 기능별 라우트 분할

 

frontend/routes/authRoutes.js

import React from 'react';
import { Route } from 'react-router-dom';
import LoginPage from '../pages/LoginPage';
import RegisterPage from '../pages/RegisterPage';

const AuthRoutes = (
  <>
    <Route path="/login" element={<LoginPage />} />
    <Route path="/register" element={<RegisterPage />} />
  </>
);

export default AuthRoutes;

 

 

frontend/routes/dashboardRoutes.js

import React from 'react';
import { Route } from 'react-router-dom';
import DashboardPage from '../pages/DashboardPage';
import ProtectedRoute from '../components/ProtectedRoute';

const DashboardRoutes = (
  <Route
    path="/dashboard"
    element={
      <ProtectedRoute>
        <DashboardPage />
      </ProtectedRoute>
    }
  />
);

export default DashboardRoutes;

 

 

 

frontend/routes/postRoutes.js

import React from 'react';
import { Route } from 'react-router-dom';
import PostListPage from '../pages/PostListPage';
import PostDetailPage from '../pages/PostDetailPage';
import CreatePostPage from '../pages/CreatePostPage';
import ProtectedRoute from '../components/ProtectedRoute';

const PostRoutes = (
  <>
    <Route path="/posts" element={<PostListPage />} />
    <Route path="/posts/:id" element={<PostDetailPage />} />
    <Route
      path="/posts/create"
      element={
        <ProtectedRoute>
          <CreatePostPage />
        </ProtectedRoute>
      }
    />
  </>
);

export default PostRoutes;

 

 

 

| 라우트 통합관리

각 기능들의 라우트를 분리해 별도의 파일로 관리하고 이를 통합적으로 관리해주는 index.js파일을 만든다. 앞으로 추가되는 기능들의 라우트를 여기 불러오기만 하면 된다.

 

frontend/src/routes/index.js 

import React from 'react';
import { Routes } from 'react-router-dom';
import AuthRoutes from './authRoutes';
import PostRoutes from './postRoutes';
import DashboardRoutes from './dashboardRoutes';

const AppRoutes = () => {
  return (
    <Routes>
      {AuthRoutes}
      {DashboardRoutes}
      {PostRoutes}
    </Routes>
  );
};

export default AppRoutes;

 

 

 

| 간편해진 라우터  

App.js에서 더 이상 모든 라우트를 구성할 필요 없이 routes/index.js에 있는 통합 라우터만 불러오면 된다.

 

frontend/src/App.js

// src/App.js
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import AppRoutes from './routes'; // routes/index.js에서 통합 관리

function App() {
  return (
    <AuthProvider>
      <Router>
        <AppRoutes />
      </Router>
    </AuthProvider>
  );
}

export default App;