Private Route with React Router

React Router은 React 생태계에서 가장 중요한 컴포넌트 중 하나이다. 우리는 먼저 예제를 통해서 private, public, restricted route와 같은 다양한 라우트를 설계하는 방법을 배울 것이다. 설명을 위해 아래 컴포넌트를 가진 간단한 어플리케이션을 만들어 보자.

1. Home: 모두가 접근할 수 있는 public 라우터

2. Dashboard: 권한을 가진 사용자만 접근할 수 있는 private 라우터

3. Sign-in: 권한을 가지지 않은 사용자만 볼 수 있는 restricted 라우터

Private Route

PrivateRoute 컴포넌트는 모든 private 라우트를 위한 청사진이다. 만약 유저가 로그인 되어있다면 해당 컴포넌트를 렌더링하고 그렇지 않다면 sign-in page로 redirect한다.

Routes.js

<PrivateRoute component={Layout} path="/" />

PrivateRoute.js

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export default function PrivateRoute({ component: Component, ...rest }) {
    return (
        <>
            <Route
                {...rest}
                render={(props) => (sessionStorage.getItem('user') ? <Component /> : <Redirect to="login" />)}
            />
        </>
    );
}

기존에 useAuth를 이용해서 user값 여부를 판단한 뒤 삼항 연산자를 통해 렌더링했다. 하지만 잘 안됐다. 이유도 모르겠다. 그래서 그냥 sesstionStorage에서 바로 값을 가져와서 판단했다.