🔐 React 로그인 인증 흐름 정리 (ProtectedRoute / PublicRoute 설계)

🔐

리액트 프로젝트를 하다 보면 반드시 마주치는 문제가 있는데
바로 로그인 상태에 따른 라우팅 처리다.

나도 이번에 로그인 플로우를 구현하면서 로그인 인증이 성공 상태(200 코드)인데도 메인 페이지로 이동이 안 되는 상황을 겪었고 그 과정에서 로그인/비로그인 라우팅 구조를 한 번 제대로 정리하게 됐다.

---

 

문제 상황

처음엔 이런 구조였다.

/**
  * fileName : useCheckAuth
  * description : 로그인 상태 확인 후 필요 시 토큰 갱신 및 페이지 이동을 결정하는 커스텀 훅
  */
export const useCheckAuth = () => {
  const { data, isLoading, isError, refetch } = useAuthQuery(); // 로그인 상태 확인
  
  ...
  
  if (data) {
    const code = data.code; // 응답 코드
  
    if (code === 200) return { isLoading: false, navigateTo: "/home", showChildren: true };
  
    ...
  } 
  
  return { isLoading: false, navigateTo: "/login", showChildren: false }; 
  
};

/**
  * fileName : ProtectRoute
  * description : 인증이 필요한 라우트를 보호하는 컴포넌트. 로그인 인증된 사용자만 페이지 접근 허용
  */
export default function ProtectedRoute({ children }: { children: React.ReactNode; }) { 
  const { isLoading, navigateTo, showChildren } = useCheckAuth();
    
  ...
  
  if (navigateTo) return <Navigate to={navigateTo} replace />;
  
  if (showChildren) return children;
}

 

겉보기에는 문제 없어 보였다.
하지만 실제로는 구조적으로 충돌이 발생한다.

 

뭐가 문제였나?

핵심은 👉 navigateTo와 showChildren을 동시에 쓰고 있었다.

ProtectedRoute에서 /home으로 보내는 로직 자체가 구조적으로 어색한 상태인거다.

즉, 인증 성공 시 이동도 하려고 하고 렌더링도 하려고 한다.

 

커스텀 훅에서 code === 200이면:

• navigateTo: "/home"
• showChildren: true

둘 다 true인 상태이다.

 

이 상태에서 실행 순서는:

1. navigateTo 먼저 실행됨
2. showChildren은 아예 렌더링 안 됨

게다가 /home에서도 ProtectedRoute를 쓰고 있으면 자기 자신으로 계속 redirect를 시도한다.

결과는 이동이 안 되는 것처럼 보이거나 무한 루프가 발생한다.

 

💡 해결 방향

라우트 가드는 이동시키는 역할이 아니다

 

사실 이 로직은 설계가 잘못된거다.

인증에 성공했는데 왜 /home으로 이동시키나?

ProtectedRoute는 원래 리다이렉트 담당이 아니라 그 값만 보고 접근 허용이나 차단만 해야 하는 것이다.

 

역할 분리

인증 상태 판단	useCheckAuth
접근 허용/차단	ProtectedRoute
로그인 유저 접근 차단	PublicRoute
페이지 이동	로그인 성공 시

 

ProtectedRoute는 UI를 담당하고
useCheckAuth는 인증 상태를 판단한다.

 

 

 

올바른 구조

라우팅은 2개로 나눈다.

 

인증 필요 라우트 (Private)

• 로그인해야 접근 가능
• 예: /home, /mypage

비인증 전용 라우트 (Public)

• 로그인 상태면 접근하면 안 됨
• 예: /login, /signup

 

1. 인증 상태 커스텀 훅

export const useCheckAuth = () => {
  const { data, isLoading, isError } = useAuthQuery();

  if (isLoading) {
    return { isLoading: true, isAuthenticated: false };
  }

  if (isError) {
    return { isLoading: false, isAuthenticated: false };
  }

  // 이동시키지 말고 그냥 통과
  if (data?.code === 200) {
    return { isLoading: false, isAuthenticated: true };
  }

  return { isLoading: false, isAuthenticated: false };
};

핵심은 isAuthenticated 하나로 단순화하여 단일 책임 + 단순 로직으로 버그를 감소하는 것이다.

 

2. ProtectedRoute (로그인 필요 페이지 보호)

export default function ProtectedRoute({ children }) {
  const { isLoading, isAuthenticated } = useCheckAuth();

  if (isLoading) return <Loading />;

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

로그인 안 했으면 차단

 

3. PublicRoute (로그인한 사람 막기)

export default function PublicRoute({ children }) {
  const { isLoading, isAuthenticated } = useCheckAuth();

  if (isLoading) return <Loading />;

  if (isAuthenticated) {
    return <Navigate to="/home" replace />;
  }

  return children;
}

로그인 했으면 로그인 페이지 들어가지 못하게 막기

 

4. Router 구성

<Routes>
  {/* 로그인 안 된 사람만 */}
  <Route
    path="/login"
    element={
      <PublicRoute>
        <Login />
      </PublicRoute>
    }
  />

  {/* 로그인 된 사람만 */}
  <Route
    path="/home"
    element={
      <ProtectedRoute>
        <Home />
      </ProtectedRoute>
    }
  />
</Routes>

 

5. 로그인 성공 시 이동 처리  

const handleLogin = async () => {
  const res = await loginApi();

  if (res.success) {
    navigate("/home");
  }
};

👉 여기서만 이동한다

 

 

내가 했던 실수

내가 했던 실수를 정리하자면

 

❌ ProtectedRoute에서 /home으로 보내기

이건 절대 하면 안 된다.

 

❌ navigateTo + showChildren 같이 쓰기

이 경우 상태 충돌이 발생한다.

 

❌ 인증 성공 시 redirect를 가드에서 처리

이 경우는 책임 분리가 깨진다.

 

 

결론

라우팅은 단순해야 버그가 없다.

• 인증 훅 → 상태만 반환한다
• 라우트 가드 → 막기만 한다
• 페이지 이동 → 이벤트에서 처리한다

이 3개만 지켜도 로그인 플로우는 거의 꼬이지 않을 것이다.