보안된 경로 구현을 위한 React Router v7 패턴

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- React Router v7을 사용하는 프론트엔드 개발자

- 인증/인가 기능이 필요한 SPA 개발자

- 성능 최적화와 확장성이 요구되는 애플리케이션 개발자

- 난이도: 중급(Context API, Route Guard, Lazy Loading 기술 필요)

핵심 요약

• AuthContext 생성: useContext + useState를 활용한 인증 상태 관리 (isAuthenticated, userRole)
• PrivateRoute 컴포넌트: react-router-dom의 + useLocation을 활용한 보호 경로 구현
• 성능 최적화: React.lazy + Suspense를 통한 코드 스플리팅 적용 (Dashboard, Profile 등)
• 권한 분리 기능: allowedRoles props를 통한 역할 기반 접근 제어 지원

섹션별 세부 요약

1. 인증 상태 관리 (AuthContext)

• AuthContextType 정의: isAuthenticated, isLoading, userRole, login/logout 함수 포함
• useEffect로 서버와의 토큰 검증: /api/auth/validate 엔드포인트 호출
• useAuth 커스텀 훅: AuthProvider 내부에서 AuthContext 사용 가능
• 코드 예시:

const AuthProvider: React.FC = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  // ...
};

2. 보호 경로 구현 (PrivateRoute)

• useAuth 훅으로 인증 상태 확인 후 또는 리턴
• 로딩 상태 처리: isLoading 시 "Loading authentication status…" 메시지 표시
• 코드 예시:

export const PrivateRoute: React.FC = () => {
  const { isAuthenticated, isLoading } = useAuth();
  const location = useLocation();
  if (isLoading) return 
Loading…
;
  return isAuthenticated ?  : ;
};

3. 애플리케이션 라우팅 설정 (App.tsx)

• BrowserRouter 내부에 }>로 보호된 경로 그룹화
• Dashboard, Profile 등 보호된 페이지를 PrivateRoute 내부에 포함
• 코드 예시:

  }>
    } />
    } />
  

4. 성능 최적화 (LazyRoutes)

• React.lazy + Suspense로 로딩 시점 지연 처리
• Dashboard, Profile 등 대규모 컴포넌트는 필요 시만 로딩
• 코드 예시:

const Dashboard = lazy(() => import('./Dashboard'));
const Profile = lazy(() => import('./Profile'));

5. 역할 기반 접근 제어 확장

• allowedRoles props 추가로 admin/user 역할 구분 가능
• 권한 미충족 시 /unauthorized로 리다이렉트
• 코드 예시:

if (allowedRoles && !allowedRoles.includes(userRole!)) {
  return ;
}

결론

• 핵심 팁: AuthContext를 통해 인증 상태 중앙화, PrivateRoute로 보호 경로 단일화, React.lazy로 성능 최적화
• 추천 사항: 로딩 상태 처리 시 UX 개선을 위한 스켈레톤 UI 적용, 역할 기반 접근 제어 시 allowedRoles 타입 정의 확장
• 최종 구현: ProtectedRoute + LazyLoading + RoleGuard 패턴을 결합한 애플리케이션 보안 아키텍처 구현