React/ReactCore

21강. React Router의 Route Guard: 페이지 접근을 안전하게 제어하는 방법

코딩쉐프 2024. 12. 29. 16:04
728x90

"React Router의 Route Guard: 페이지 접근을 안전하게 제어하는 방법"


1시간 분량 강의안 (Route Guards 기초)

강의 목표

  1. Route Guard의 개념과 필요성을 이해한다.
  2. React Router에서 Route Guard를 구현하여 라우트 접근을 제어하는 방법을 학습한다.
  3. 인증과 권한에 따라 접근을 제한하는 다양한 사례를 실습한다.

강의 목차


1. Route Guard란 무엇인가? (10분)

Route Guard의 정의

  • Route Guard는 특정 조건을 만족하지 않으면 페이지에 접근하지 못하도록 제한하는 기능입니다.
  • 주로 사용자 인증, 권한, 조건부 로직에 따라 특정 경로로의 접근을 제어합니다.

Route Guard의 필요성

  1. 보안 강화: 인증되지 않은 사용자로부터 민감한 페이지 보호.
  2. 유저 경험 개선: 적절한 페이지로 리디렉션하여 혼란 방지.
  3. 권한 기반 UI 제어: 사용자의 권한에 맞는 콘텐츠 제공.

2. Route Guard 구현 기본 설정 (10분)

1단계: React Router 설치

npm install react-router-dom

2단계: 인증 상태 시뮬레이션

  • 간단한 인증 상태를 관리하는 로직 작성:
const isAuthenticated = false; // 사용자가 로그인했는지 여부를 나타냄

3. 기본 Route Guard 구현 (20분)

1단계: Protected Route 컴포넌트 작성

  • isAuthenticated를 기반으로 라우트 접근을 제어:
import React from 'react';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuth, children }) {
  return isAuth ? children : <Navigate to="/login" />;
}

export default ProtectedRoute;

2단계: Route Guard 적용

  • 특정 경로에 ProtectedRoute를 적용:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import Dashboard from './Dashboard';
import Login from './Login';

function App() {
  const isAuthenticated = false;

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute isAuth={isAuthenticated}>
              <Dashboard />
            </ProtectedRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

4. Route Guard 고급 구현 (20분)

1단계: 권한 기반 접근 제어

  • 사용자 권한(role)에 따라 접근을 제한:
function RoleBasedRoute({ role, requiredRole, children }) {
  return role === requiredRole ? children : <Navigate to="/not-authorized" />;
}

// 사용 예시
<Route
  path="/admin"
  element={
    <RoleBasedRoute role="user" requiredRole="admin">
      <AdminPanel />
    </RoleBasedRoute>
  }
/>;

2단계: 리디렉션 후 상태 유지

  • 로그인 후 사용자를 이전 페이지로 리디렉션:
import { useLocation, Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuth, children }) {
  const location = useLocation();
  return isAuth ? (
    children
  ) : (
    <Navigate to="/login" state={{ from: location }} />
  );
}

// 로그인 페이지에서 리디렉션 처리
function Login() {
  const location = useLocation();
  const from = location.state?.from?.pathname || '/';

  const handleLogin = () => {
    // 로그인 로직 실행
    navigate(from);
  };

  return <button onClick={handleLogin}>Login</button>;
}

3단계: 다중 조건 Route Guard

  • 복합 조건을 기반으로 접근 제한:
function MultiConditionRoute({ isAuth, hasPermission, children }) {
  if (!isAuth) return <Navigate to="/login" />;
  if (!hasPermission) return <Navigate to="/not-authorized" />;
  return children;
}

5. 실습 과제 (10분)

실습 과제

  1. 로그인 여부를 확인하여 /dashboard 접근을 제어하세요.
  2. 사용자의 역할(role)에 따라 /admin 접근을 제한하세요.
  3. 로그인 후 이전 페이지로 리디렉션되는 기능을 구현하세요.

6. Q&A 및 정리 (10분)

  • Q&A:
    1. Route Guard는 어떤 상황에서 사용해야 하나요?
    2. React Router의 Route Guard와 Next.js의 middleware 차이점은 무엇인가요?
  • 요약:
    • Route Guard는 React 애플리케이션에서 보안과 사용자 경험을 개선하는 중요한 기능입니다.
    • Navigate를 사용해 조건에 따라 리디렉션을 구현할 수 있습니다.
    • 권한 및 인증 상태를 기반으로 접근을 제한하거나 조건부 로직을 추가할 수 있습니다.
728x90