리다이렉트 라우트 생성하기

먼저 사용자가 로그인했는지 확인한 후 라우팅을 수행하는 라우트를 만들어 보겠습니다.

Change indicator src/components/AuthenticatedRoute.tsx 파일을 생성하고 다음 코드를 추가하세요.

import { ReactElement } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { useAppContext } from "../lib/contextLib";

export default function AuthenticatedRoute({
  children,
}: {
  children: ReactElement;
}): ReactElement {
  const { pathname, search } = useLocation();
  const { isAuthenticated } = useAppContext();

  if (!isAuthenticated) {
    return <Navigate to={`/login?redirect=${pathname}${search}`} />;
  }

  return children;
}

이 간단한 컴포넌트는 사용자가 인증된 경우에만 자식 컴포넌트를 렌더링하는 Route를 생성합니다. 사용자가 인증되지 않은 경우 로그인 페이지로 리다이렉트됩니다. 이제 이 코드를 자세히 살펴보겠습니다:

React의 모든 컴포넌트와 마찬가지로, AuthenticatedRoute는 자식 컴포넌트를 나타내는 children prop을 가집니다. 예를 들어 NewNote, Notes, Settings 등이 자식 컴포넌트가 될 수 있습니다.
AuthenticatedRoute 컴포넌트는 React Router의 Route 컴포넌트를 반환합니다.
useAppContext 훅을 사용해 사용자가 인증되었는지 확인합니다.
사용자가 인증된 경우 children 컴포넌트를 렌더링합니다. 인증되지 않은 경우 React Router의 Navigate 컴포넌트를 사용해 로그인 페이지로 리다이렉트합니다.
현재 경로를 로그인 페이지로 전달합니다(redirect 쿼리 문자열). 이 정보는 나중에 사용자가 로그인한 후 원래 페이지로 돌아오기 위해 사용됩니다. useLocation React Router 훅을 사용해 이 정보를 가져옵니다.

이제 사용자가 인증되지 않았는지 확인하는 비슷한 작업을 수행해 보겠습니다.

Change indicator 다음으로 src/components/UnauthenticatedRoute.tsx 파일을 생성하고 다음 코드를 추가하세요.

import { cloneElement, ReactElement } from "react";
import { Navigate } from "react-router-dom";
import { useAppContext } from "../lib/contextLib";

interface Props {
  children: ReactElement;
}

export default function UnauthenticatedRoute(props: Props): ReactElement {
  const { isAuthenticated } = useAppContext();
  const { children } = props;

  if (isAuthenticated) {
    return <Navigate to={"/"} />;
  }

  return cloneElement(children, props);
}

여기서는 사용자가 인증되지 않았는지 확인한 후 자식 컴포넌트를 렌더링합니다. 예를 들어 Login과 Signup이 자식 컴포넌트가 될 수 있습니다. 사용자가 인증된 경우 Navigate 컴포넌트를 사용해 홈페이지로 이동시킵니다.

위의 cloneElement는 UnauthenticatedRoute 라우트의 자식 컴포넌트에 전달된 state가 올바르게 처리되도록 보장합니다.

이제 이 컴포넌트들을 앱에서 사용해 보겠습니다.

리다이렉트 라우트 생성하기

SST Guide