특정 페이지가 로그인한 상태에서만 보여줘야 되는 경우, HOC 방식으로 Auth 에 관련된 인증 로직 컴포넌트를 페이지 컴포넌트에다 감쌀 것이다.

const Auth = ({ children }: React.PropsWithChildren<Props>) => {
  // 로그인 판별용 로직
  if (jwt 토큰 검사) return <Navigate to="/login" replace />

  return children;
};

const Page = ({ children }: React.PropsWithChildren<Props>) => {
	return <div>로그인한 사용자에게 보여줘야되는 페이지</div>;
};

export default Page;

// 라우터 코드
<Route element={<Auth><Page /></Auth> />

이때 /login 으로 이동할 때 무한루프에 걸렸었다.

원인

나는 electron + vite + react 환경에서 프로젝트를 구성했고, SPA 환경이다.

react-router-dom의 createBrowserRouter를 이용해 라우팅을 구현했다.

createBrowserRouter에는 element와 더불어 children 속성이 있다.

children 속성은 배열로 path와 element를 받는다.

말 그대로 특정 주소에서 자식 주소를 렌더링 하기 위해 쓰는 것이다.

나는 졸릴 때 이걸 구현했었고, 루트에다 children 으로 login과 daily를 줬었다.

이렇게 하면 루트 페이지에서 사용자가 로그인 되어 있지 않아 /login 으로 이동한다. 하지만 /login은 자식 path 이므로 브라우저 라우터에서 매칭이 됐음에도 계속 호출이 된다.

솔루션

간단하다. children 으로 주지 않고, 각각의 독립적인 path로 주면 된다.

그리고 컨텍스트적인 면에서 이게 맞다. 내 웹앱에서 루트와 로그인, 데일리는 각각 다른 성격을 띄고 있으므로 독립적인 라우팅을 가져야 한다.