React 라우팅 Auth체크 및 구조와 관리의 개선

이번 글에서는 두 가지 라우팅 방식과 그 장단점을 비교해 보겠습니다. 첫 번째 방식은 기본적인 라우팅 설정이고, 두 번째 방식은 이를 개선한 방식입니다.

변경 전 코드

기존의 라우팅 설정은 각 경로에 대해 직접 ProtectedRoute 컴포넌트를 사용하는 방식입니다.

// router.js
import React from "react";
import { createBrowserRouter } from "react-router-dom";
import ProtectedRoute from "../components/ProtectedRoute";
import DefaultLayout from "../layout/DefaultLayout";
import Detail from "../pages/Detail";
import Home from "../pages/Home";
import Join from "../pages/Join";
import Login from "../pages/Login";
import Mypage from "../pages/Mypage";

const router = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: [
      {
        path: "/",
        element: (
          <ProtectedRoute>
            <Home />
          </ProtectedRoute>
        ),
      },
      {
        path: "/detail/:id",
        element: (
          <ProtectedRoute>
            <Detail />
          </ProtectedRoute>
        ),
      },
      {
        path: "/login",
        element: <Login />,
      },
      {
        path: "/join",
        element: <Join />,
      },
      {
        path: "/mypage",
        element: (
          <ProtectedRoute>
            <Mypage />
          </ProtectedRoute>
        ),
      },
    ],
  },
]);

export default router;

// ProtectedRoute.js
import React from "react";
import { Navigate } from "react-router-dom";
import Swal from "sweetalert2";
import useAuthStore from "../zustand/store";

const ProtectedRoute = ({ children }) => {
  const { token } = useAuthStore();
  if (!token || token === "null") {
    Swal.fire({
      icon: "warning",
      title: "비로그인",
      text: "로그인 후 이용 가능한 서비스 입니다.",
    });
    return <Navigate to="/login" />;
  }

  return children;
};

export default ProtectedRoute;

변경 후 코드

개선된 라우팅 설정은 라우터 데이터를 별도로 관리하며, 인증이 필요한 경로를 ProtectedRoute로 감싸는 방식입니다.

// routerData.js
import Home from "../pages/Home";
import Detail from "../pages/Detail";
import Join from "../pages/Join";
import Login from "../pages/Login";
import Mypage from "../pages/Mypage";

const routerData = [
  {
    id: 0,
    path: "/",
    label: "Home",
    element: <Home />,
    withAuth: false,
  },
  {
    id: 1,
    path: "/detail/:id",
    label: "Detail",
    element: <Detail />,
    withAuth: true,
  },
  {
    id: 2,
    path: "/login",
    label: "로그인",
    element: <Login />,
    withAuth: false,
  },
  {
    id: 3,
    path: "/join",
    label: "회원가입",
    element: <Join />,
    withAuth: false,
  },
  {
    id: 4,
    path: "/mypage",
    label: "마이페이지",
    element: <Mypage />,
    withAuth: true,
  },
];

export default routerData;

// router.js
import React from "react";
import { createBrowserRouter } from "react-router-dom";
import routerData from "./routerData";
import ProtectedRoute from "../components/ProtectedRoute";
import DefaultLayout from "../layout/DefaultLayout";

const router = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: routerData.map((route) => {
      if (route.withAuth) {
        return {
          path: route.path,
          element: (
            <ProtectedRoute>
              {route.element}
            </ProtectedRoute>
          ),
        };
      } else {
        return {
          path: route.path,
          element: route.element,
        };
      }
    }),
  },
]);

export default router;

// ProtectedRoute.js
import React from "react";
import { Navigate } from "react-router-dom";
import Swal from "sweetalert2";
import useAuthStore from "../zustand/store";

const ProtectedRoute = ({ children }) => {
  const { token } = useAuthStore();
  if (!token || token === "null") {
    Swal.fire({
      icon: "warning",
      title: "비로그인",
      text: "로그인 후 이용 가능한 서비스 입니다.",
    });
    return <Navigate to="/login" />;
  }

  return children;
};

export default ProtectedRoute;

장단점 비교

변경 전 코드

장점:

• 단순하고 직관적인 구조
• 각 경로에서 명시적으로 인증 여부를 확인 가능

단점:

• 반복적인 코드가 많아짐
• 경로가 많아질수록 유지보수가 어려워짐
• 인증 여부 변경 시, 모든 경로를 수정해야 함

변경 후 코드

장점:

• 라우터 데이터와 인증 로직의 분리로 관리가 용이
• 경로 추가 및 수정이 간편
• 유지보수가 쉬워짐
• 라우터 데이터를 재사용 가능

단점:

• 초기 설정이 약간 복잡할 수 있음
• 라우터 데이터와 실제 컴포넌트가 분리되어 있어 이해가 어려울 수 있음

변경이유

변경된 방법은 확장성과 유지보수성을 고려한 접근입니다. 초기 설정이 다소 복잡할 수 있지만, 경로가 많아질수록 그 장점이 커집니다. 특히 대규모 프로젝트에서 경로와 인증 로직을 별도로 관리함으로써 코드의 가독성과 유지보수성을 높일 수 있습니다.