[React] PrivateRoute 만들기(react-router-dom v6)

PrivateRoute

로그인한 유저만 접속 가능한 페이지가 별도로 존재하는데
처음엔 auth를 확인하는 custom hooks를 만들까 하다가
PrivateRoute를 만들 수 있다는 걸 알게 됐고, 열심히 서치했지만
react-router-dom v6 이전에 작성된 글들이 많아 맞지 않는 부분이 많았다.

바로 완성 코드

//PrivateRoute.tsx

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { AuthStateAtom } from "@recoils/user/Atom";

export default function PrivateRoute() {
  // 이곳에 인증을 검증할 방법을 적으면 된다
  const { isLogin } = useRecoilValue(AuthStateAtom);

  if (isLogin) {
    // 인증이 반드시 필요한 페이지
    return <Outlet />;
  }
  // 미로그인 유저가 이동할 곳
  return <Navigate replace to="/main" />;
}

인증 검증을 위해 임시로 Recoil에 저장된 값을 가져다 썼는데, Web Storage에서 검증하는 식으로 수정할 예정이다. (Token에 바로 접근은 XXX!)

사용 예시

import { Route, Routes } from "react-router-dom";
import MainPage from "@pages/Main";
import PrivateRoute from "./PrivateRoute";

export default function Routers() {
  return (
    <Routes>
      {/* 로그인이 필요한 경우 */}
      <Route path="/main" element={<MainPage />} />

      {/* 로그인이 필요한 경우*/}
      <Route element={<PrivateRoute />}>
        <Route path="/deal/detail/:dealId" element={<DealDetail />} />
      </Route>
    </Routes>
  );
}

열심히 찾아본 시간에 비해 아주 간결하게 구현이 되어버렸다.
아무튼 좋아 ^^;