[React] Private Route

✏️Private Route 사용계기

프로젝트를 진행하던 중, 로그인 여부에 따라 보여지는 화면이 달라져야 했다.

Private Route를 몰랐을 때는 로그인 여부에 따라
로그인이 되면 기본 레이아웃 화면을 보여주고
아니면 로그인 화면으로 이동하는 것으로 직접 코드를 구현했다.

Private Route는 이 과정을 쉽고 깔끔하게 구현할 수 있도록 도와주는 방법으로 생각보다 다양한 구현 방식이 있는데 그 중에서 나는 아래와 같은 방식을 선택해 적용해보았다.

💡적용 방식

내가 적용한 방식에서 가장 중요한 건
react-router-dom의 Navigate 태그와 replace 요소라고 생각한다.

Private Route를 구현하기 위해서는
로그인 여부를 확인하고 상황에 따라 컴포넌트를 보여주거나
페이지를 이동시키는 PrivateRoute라는 컴포넌트를 만들어야 한다.

PrivateRoute에서 로그인 상태일 때는 기존의 생각한 방식대로 진행하면 되고
로그인 상태가 아닐 때는 내가 이동시키고 싶은 페이지와 path로 이동시키면 된다.

생각보다 간단하지 않은가?

💻적용한 코드

기존에 작성한 코드는 아래와 같다.

/* App.tsx */

const App = () => {
  return (
    <RecoilRoot>
      <Routes>
        <Route path="login" element={<Login />} />
        <Route path="/" element={<Navigation />}>
          ...
        </Route>
      </Routes>
    </RecoilRoot>
  )

/* Navigation.tsx */

const Navigation = () => {
  const cookies = new Cookies()
  const navigate = useNavigate()

  useEffect(() => {
    if (cookies.get('token') === undefined) {
      navigate('/login')
    }
  }, [])

  return <div>{cookies.get('token') !== undefined ? <Layout /> : null}</div>
}

변경한 코드한 코드는 이렇다.

/* App.tsx */

const App = () => {
  return (
    <RecoilRoot>
      <Routes>
        <Route path="login" element={<Login />} />
        <Route
          path="/"
          element={
            <PrivateRoute>
              <Layout />
            </PrivateRoute>
          }
        >
          ...
        </Route>
      </Routes>
    </RecoilRoot>
  )
}

/* PrivateRoute */

type PrivateRouteProps = {
  children: JSX.Element
}

const PrivateRoute = ({ children }: PrivateRouteProps) => {
  const cookies = new Cookies()
  if (cookies.get('token') === undefined) {
    return <Navigate to="login" replace />
  }

  return children
}

참고한 사이트