ProtectedRoute-인증 상태 확인 후 페이지 이동

아래는 React Router와 앞서 만든 인증 로직(예: Context, useAuth 훅 등)을 활용하여, 페이지에 진입하기 전에 인증 여부를 확인하고 인증되지 않은 경우 경고창을 띄운 후 로그인 페이지로 리다이렉트하는 예시입니다.

---

1. ProtectedRoute 컴포넌트 만들기

설명:
ProtectedRoute 컴포넌트는 자식 컴포넌트를 렌더링하기 전에 useAuth를 통해 로그인 여부를 체크합니다. 인증되지 않은 상태라면 alert 창을 띄운 후 로그인 페이지로 이동시킵니다.

파일: src/components/ProtectedRoute.tsx

import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';

interface ProtectedRouteProps {
  children: JSX.Element;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    // 인증되지 않은 경우 경고창을 띄움
    alert('로그인이 필요합니다.');
    // 로그인 페이지로 리다이렉트
    return <Navigate to="/login" replace />;
  }

  // 인증된 경우 자식 컴포넌트를 그대로 렌더링
  return children;
};

export default ProtectedRoute;

---

2. 라우터 설정에 ProtectedRoute 적용하기

설명:
React Router를 사용하여 라우트를 구성할 때, 보호하고 싶은 페이지(예: Dashboard)를 ProtectedRoute로 감싸줍니다. 이렇게 하면 해당 페이지에 접근하기 전에 인증 여부가 체크됩니다.

파일: src/App.tsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import ProtectedRoute from './components/ProtectedRoute';

const App: React.FC = () => {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route 
            path="/dashboard" 
            element={
              <ProtectedRoute>
                <Dashboard />
              </ProtectedRoute>
            } 
          />
          {/* 필요에 따라 다른 보호된 페이지들도 ProtectedRoute로 감싸기 */}
        </Routes>
      </Router>
    </AuthProvider>
  );
};

export default App;

---

3. 요약

1. ProtectedRoute 컴포넌트:
   • useAuth 훅을 통해 isAuthenticated를 확인합니다.
   • 인증되지 않은 경우 alert 창을 띄운 후 <Navigate />를 사용해 로그인 페이지로 리다이렉트합니다.
   • 인증된 경우 자식 컴포넌트를 그대로 렌더링합니다.
2. 라우터 설정:
   • React Router의 라우트 구성 시, 보호가 필요한 경로를 ProtectedRoute로 감싸면 해당 경로에 진입하기 전에 인증 체크가 이루어집니다.

이렇게 구성하면 사용자가 인증되지 않은 상태로 보호된 페이지에 접근하려 할 때 경고창이 뜨고, 자동으로 로그인 페이지로 이동하게 되어 보다 안전하게 페이지 접근을 제어할 수 있습니다.