[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 6 'protected-route.tsx'

protected-route.tsx

import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth } from '../firebase';

// children prop은 보호된 라우트 내부에서 렌더링될 컴포넌트를 의미합니다. 
// JSX.Element 타입은 리액트 엘리먼트(UI 구성 기본 단위)를 나타냅니다.
interface ProtectedRouteProps {
  children: JSX.Element;
}

// ProtectedRoute 컴포넌트: 인증이 필요한 라우트를 보호하기 위한 함수형 컴포넌트입니다.
// FC: FunctionComponent의 약자
// FC를 사용하면 컴포넌트의 props에 대한 타입 검사를 자동으로 처리하고, children prop을 기본적으로 포함하는 등의 유용한 기능을 제공
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  // useAuthState 훅을 사용하여 현재 사용자의 인증 상태(user)와 로딩 상태(loading)를 가져옵니다.
  const [user, loading] = useAuthState(auth);

  // 로딩 중일 때는 "Loading..." 메시지를 표시합니다.
  if (loading) {
    return <div>Loading...</div>;
  }

  // 사용자가 인증되지 않은 경우 로그인 페이지로 리디렉션합니다.
  if (!user) {
    return <Navigate to="/login" replace />;
  }

  // 인증된 사용자의 경우 자식 컴포넌트를 렌더링합니다.
  return children;
};

export default ProtectedRoute;

 

이 코드는 인증된 사용자가 특정 경로에 접근하도록 보호하는 ProtectedRoute 컴포넌트를 구현합니다. 인증 상태를 확인하여 로딩 중이면 로딩 메시지를, 인증되지 않은 경우 로그인 페이지로 리디렉션합니다. 인증된 경우에만 자식 컴포넌트를 렌더링합니다.