본격 연동 #3. 프론트에서의 라우팅을 활용한 보안, 인증 처리

🔹 문제: 개별 페이지마다 인증을 적용하면?

React 애플리케이션에서 로그인 후 특정 페이지에만 접근할 수 있도록 보호하는 방법은 여러 가지가 있습니다. 하지만 잘못된 방식으로 구현하면 불필요한 연산이 발생하고, 코드의 유지보수성이 떨어질 수 있습니다.

일반적으로 인증을 적용하는 방법 중 하나는 각 페이지마다 개별적으로 인증 로직을 감싸는 것입니다.

❌ 개별 페이지마다 인증을 적용하는 방식

<Route path="/main" element={<AuthenticatedComponent><MainPage /></AuthenticatedComponent>} />
<Route path="/profile" element={<AuthenticatedComponent><ProfilePage /></AuthenticatedComponent>} />
<Route path="/income" element={<AuthenticatedComponent><IncomePage /></AuthenticatedComponent>} />

➡ 문제점:

1. 각 페이지마다 AuthenticatedComponent가 실행됨 → 불필요한 연산 증가 ❌
2. 모든 페이지에서 인증 로직이 중복됨 → 유지보수 어려움 ❌
3. 공통 UI(Navbar, Sidebar)도 불필요하게 리렌더링될 가능성 ❌

🔹 해결책: Layout을 감싸 인증을 최적화하기

대신, Layout 컴포넌트를 AuthenticatedComponent로 한 번만 감싸주면 인증이 필요한 모든 페이지에서 인증 검사를 한 번만 수행할 수 있습니다.

✅ 공통 레이아웃을 활용한 최적화된 방식

<Route
  element={
    <AuthenticatedComponent>
      <Layout />
    </AuthenticatedComponent>
  }
>
  <Route path="/main" element={<MainPage />} />
  <Route path="/profile" element={<ProfilePage />} />
  <Route path="/income" element={<IncomePage />} />
</Route>

➡ 장점:

1. AuthenticatedComponent가 한 번만 실행됨 → 불필요한 연산 감소 ✅
2. Layout 내부의 모든 페이지가 자동 보호됨 → 중복 코드 제거 ✅
3. 공통 UI(Navbar, Sidebar)가 유지되면서 내부 페이지만 변경됨 → 렌더링 최적화 ✅

🔹 AuthenticatedComponent 구현 예시

import { useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { GoalContext } from '../context/GoalContext';

const AuthenticatedComponent = ({ children }) => {
  const { goalAmount, loading } = useContext(GoalContext);
  const navigate = useNavigate();

  useEffect(() => {
    if (loading) return;

    const accessToken = localStorage.getItem('accessToken');

    if (!accessToken) {
      alert('로그인이 필요한 서비스입니다. 로그인 페이지로 이동합니다');
      navigate('/login');
      return;
    }

    if (!goalAmount) {
      alert('목표 금액을 설정해주세요. 목표금액 설정 페이지로 이동합니다');
      navigate('/goal-setting');
    }
  }, [goalAmount, loading, navigate]);

  return children;
};

export default AuthenticatedComponent;

🎯 결론: 공통 레이아웃을 활용한 인증이 가장 효율적!

✅ 한 번만 감싸도 내부 페이지 전체 보호 가능!
✅ 불필요한 인증 연산을 줄여 성능 개선!
✅ 유지보수 편리 & 코드 중복 최소화!

React 프로젝트에서 공통 레이아웃(Layout)을 활용한 인증 방식이 가장 최적화된 구조이므로, 앞으로 인증이 필요한 경우 이 방식을 해서. 나쁠건 없다.