인증 상태에 따른 라우팅 구현하기

To-Do 리스트를 본격적으로 만들기 전, 회원가입 및 로그인 기능을 추가하기 전에 인증된 사용자와 비인증 사용자에 따른 라우팅을 먼저 구현해 보겠습니다.

1. 인증된 사용자만 접근 가능한 경로 설정

먼저, useAuth라는 훅을 만들어 인증 여부를 확인할 수 있도록 합니다.

const useAuth = () => {
    const [isSignIn, setSignIn] = useState(true);
    return {isSignIn};
}

✅ useAuth 훅에서 isSignIn 상태를 사용해 로그인 여부를 확인합니다. 현재는 true로 설정해 놓았지만, 이후에는 실제 로그인 상태를 관리하는 로직이 들어갈 예정입니다.

다음으로, ProtectedRoute를 만들어 로그인한 사용자만 특정 페이지에 접근할 수 있도록 설정합니다.

const ProtectedRoute = () => {
    const { isSignIn } = useAuth();
    const { pathname } = useLocation();
    if (!isSignIn) {
        return <Navigate to="/sign-in" replace state={{ redirectedFrom: pathname }} />;
    }
    return <Outlet />;
};

✅ ProtectedRoute 역할

useAuth()를 사용해 로그인 여부를 확인
isSignIn이 false일 경우 Navigate를 사용해 /sign-in으로 이동
state={{ redirectedFrom: pathname }}를 통해 사용자가 원래 가려던 경로를 기억
로그인한 경우 Outlet을 반환하여 자식 페이지(예: Home, MyPage)를 렌더링

이제 ProtectedRoute를 활용해 인증된 사용자와 인증되지 않은 사용자의 접근 경로를 구분합니다.

2. createBrowserRouter를 이용한 라우팅 설정

const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        children: [
            { path: '/', element: <Home /> },
            {
                element: <ProtectedRoute />, 
                children: [
                    { path: 'mypage', element: <MyPage /> },
                    { path: 'about', element: <About /> },
                ],
            },
            { path: 'sign-in', element: <>Sign-In</> },
            { path: 'sign-up', element: <>Sign-Up</> },
        ],
    },
]);

1. 기본 Layout 적용

path: '/'에서 <Layout />을 기본 element로 설정
모든 페이지가 <Layout /> 내부에서 렌더링되도록 구성

2. 공통 페이지

{ path: '/', element: <Home /> } → 루트 경로에서 Home 페이지를 표시
{ path: 'sign-in', element: <>Sign-In</> }
{ path: 'sign-up', element: <>Sign-Up</> }
→ 로그인하지 않은 사용자가 접근 가능한 페이지

3. 인증이 필요한 페이지를 그룹화

{ element: <ProtectedRoute />, children: [...] }
→ 인증된 사용자만 접근 가능한 라우트를 <ProtectedRoute />로 감싸서 처리
- { path: 'mypage', element: <MyPage /> }
- { path: 'about', element: <About /> }
  → 로그인한 사용자만 MyPage와 About 페이지에 접근 가능

3. RouterProvider로 라우팅 적용

const Routes = () => {
    return <RouterProvider router={router} />
};

RouterProvider를 사용해 router 설정을 앱의 최상위에서 적용합니다.

4. App 컴포넌트에서 Routes 사용

const App = () => {
    return (
        <>
            <ThemeContextProvider>
                <GlobalStyle />
                <Provider store={store}>
                    <Routes />
                </Provider>
            </ThemeContextProvider>
        </>
    );
};

앞으로 모든 페이지로 넘어가기 전 인증 유무를 통해 권한 관리를 할 수 있습니다.

로그인 된 경우

로그인 안 된 경우

FrontEnd-Dev