React Academy · 강의

보호된 경로와 인증 가드

래퍼 컴포넌트 또는 로더 기반 가드를 사용해 인증되지 않은 사용자를 로그인으로 리디렉션합니다.

보호된 경로와 인증 가드은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

라우트를 보호하는 이유

대시보드, 프로필, 관리자 페이지 같은 일부 페이지는 인증된 사용자만 접근할 수 있어야 합니다. 리액트 라우터는 래퍼 컴포넌트와 로더 기반 보호 로직이라는 두 가지 접근 방식을 제공합니다.

인증 상태 형태

먼저 컴포넌트가 사용자의 로그인 여부를 알 수 있도록 인증 컨텍스트를 설정합니다.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (creds) => { const u = await apiLogin(creds); setUser(u); };
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

래퍼 컴포넌트 보호 로직

인증 상태를 확인하고 사용자가 인증되지 않았으면 로그인으로 리디렉션하는 PrivateRoute 컴포넌트를 만듭니다.

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

// Usage in router:
{ element: <PrivateRoute />, children: [
  { path: '/dashboard', element: <Dashboard /> },
]}

리디렉션 URL 보존하기

로그인 후 사용자를 원래 위치로 돌려보낼 수 있도록 사용자가 시도한 URL을 저장합니다. Navigate 컴포넌트의 state를 통해 전달합니다.

function PrivateRoute() {
  const { user } = useAuth();
  const location = useLocation();
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <Outlet />;
}

// In login handler:
const location = useLocation();
const from = location.state?.from?.pathname || '/';
navigate(from, { replace: true });

로더 기반 보호 로직(데이터 라우터)

데이터 라우터 API에서는 라우트의 loader에 인증 확인을 추가합니다. 사용자가 인증되지 않았으면 리디렉션을 던집니다.

import { redirect } from 'react-router-dom';

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token) throw redirect('/login');
  return token;
}

const router = createBrowserRouter([
  {
    path: '/dashboard',
    loader: requireAuth,
    element: <Dashboard />,
  },
]);

역할 기반 보호 로직

역할을 확인하도록 보호 로직을 확장합니다. 사용자에게 필요한 역할이 없으면 권한 없음 페이지로 리디렉션합니다.

function AdminRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role !== 'admin') return <Navigate to="/unauthorized" replace />;
  return <Outlet />;
}

인증 확인 중 로딩 상태

인증 상태가 서버 등에서 비동기적으로 로드된다면 확인이 완료될 때까지 로딩 표시기를 보여 로그인 페이지가 잠깐 나타나는 현상을 방지합니다.

function PrivateRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

여러 라우트를 한 번에 보호하기

보호해야 하는 모든 라우트를 하나의 PrivateRoute 래퍼 아래에 그룹화하면 각 라우트에 보호 로직을 반복해서 작성하지 않아도 됩니다.

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <PrivateRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
]);

토큰 만료 처리

보호 로직 내부 또는 전역 가로채기에서 토큰 만료를 확인하고, 토큰이 만료되면 사용자를 로그아웃한 뒤 로그인으로 리디렉션합니다.

function isTokenValid(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 > Date.now();
}

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token || !isTokenValid(token)) throw redirect('/login');
  return token;
}

새로 고침 토큰 흐름

401 응답에서 리디렉션하기 전에 토큰 새로 고침을 시도합니다. 새로 고침도 실패한 경우에만 로그인으로 리디렉션합니다.

async function requireAuth() {
  let token = localStorage.getItem('token');
  if (!token || isExpired(token)) {
    token = await refreshToken();
    if (!token) throw redirect('/login');
    localStorage.setItem('token', token);
  }
  return token;
}

새로 고침 후에도 인증 유지하기

인증 토큰을 localStorage 또는 HttpOnly 쿠키에 저장합니다. 앱을 로드할 때 보호된 라우트를 렌더링하기 전에 인증 상태를 복원합니다.

빠른 확인

리액트 라우터에서 로더 기반 인증 보호 로직을 사용할 때 인증되지 않은 사용자를 리디렉션하려면 무엇을 던져야 합니까?

복습

PrivateRoute 래퍼와 <Outlet />을 사용하거나 redirect()를 던지는 로더를 사용해 라우트를 보호합니다. 탐색 상태에 원래 의도한 URL을 보존하고, 화면이 잠깐 나타나는 현상을 방지하도록 로딩 상태를 처리하며, 중복을 피하려면 보호된 라우트를 그룹화합니다.

자주 묻는 질문

“보호된 경로와 인증 가드” 강의는 무료인가요?

네 — “보호된 경로와 인증 가드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“보호된 경로와 인증 가드”에서 뭘 배우나요?

래퍼 컴포넌트 또는 로더 기반 가드를 사용해 인증되지 않은 사용자를 로그인으로 리디렉션합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“보호된 경로와 인증 가드” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기