728x90
"React Router의 Route Guard: 페이지 접근을 안전하게 제어하는 방법"
1시간 분량 강의안 (Route Guards 기초)
강의 목표
- Route Guard의 개념과 필요성을 이해한다.
- React Router에서 Route Guard를 구현하여 라우트 접근을 제어하는 방법을 학습한다.
- 인증과 권한에 따라 접근을 제한하는 다양한 사례를 실습한다.
강의 목차
1. Route Guard란 무엇인가? (10분)
Route Guard의 정의
- Route Guard는 특정 조건을 만족하지 않으면 페이지에 접근하지 못하도록 제한하는 기능입니다.
- 주로 사용자 인증, 권한, 조건부 로직에 따라 특정 경로로의 접근을 제어합니다.
Route Guard의 필요성
- 보안 강화: 인증되지 않은 사용자로부터 민감한 페이지 보호.
- 유저 경험 개선: 적절한 페이지로 리디렉션하여 혼란 방지.
- 권한 기반 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분)
실습 과제
- 로그인 여부를 확인하여 /dashboard 접근을 제어하세요.
- 사용자의 역할(role)에 따라 /admin 접근을 제한하세요.
- 로그인 후 이전 페이지로 리디렉션되는 기능을 구현하세요.
6. Q&A 및 정리 (10분)
- Q&A:
- Route Guard는 어떤 상황에서 사용해야 하나요?
- React Router의 Route Guard와 Next.js의 middleware 차이점은 무엇인가요?
- 요약:
- Route Guard는 React 애플리케이션에서 보안과 사용자 경험을 개선하는 중요한 기능입니다.
- Navigate를 사용해 조건에 따라 리디렉션을 구현할 수 있습니다.
- 권한 및 인증 상태를 기반으로 접근을 제한하거나 조건부 로직을 추가할 수 있습니다.
728x90
'React > ReactCore' 카테고리의 다른 글
24. Emotion으로 배우는 CSS-in-JS 스타일링: React 프로젝트의 효율적인 디자인 관리 (0) | 2024.12.29 |
---|---|
23.Styled Components로 배우는 JavaScript 기반 스타일링: React 프로젝트의 스타일링 혁신 (0) | 2024.12.29 |
22. CSS Modules로 배우는 컴포넌트별 스타일링: React 프로젝트에서 효율적인 CSS 관리 (0) | 2024.12.29 |
20.React Dynamic Routing: 동적 경로 매칭과 렌더링의 모든 것 (1) | 2024.12.16 |
19.React Router 완전 정복: React 애플리케이션의 라우팅 구현 (1) | 2024.12.16 |