Route에 입장권한을 부여해보자.

첫번째 시도 : JSX의 삼항연산자로 조건부 렌더링하기

삼항연산자로는 수많은 Route를 엮기에는 너무나 복잡하였다. 같이 프로젝트를 하던 동료중에 useLocation을 이용한 방법이 있다고해서 GPT에게 물어본뒤 다음단계로 진행하였다.

두번째 시도 : ReactHook 사용하기

로그인 판별 여부를 판단해주는 상태관리 useEffect,
현재 App의 location 정보를 가져올 수 있도록 도와주는 useLocation,
특정 location으로 이동시켜주는 useNavigate,
위의 reactHook 3개로 조건부 렌더링을 설정해 주었다.

function App(){
	const { isLogin } = useStore(); // Zustand를 이용한 전역상태관리
	const location = useLocation(); // useLocation을 사용합니다.
  
  if (
 	 !isLogin &&
 	 (location.pathname === '/userPage')
  ) {
 	 return <Navigate to="/login" />;
  }
}

if를 사용하여 isLogin 상태가 false 일 경우와 location이 /userPage 일 경우에 /Login 페이지로 보내준다.
복잡하게 Route가 묶여있어도 ReactHook을 이용하여 특정 location만 설정할 수 있다.

사용자는 로그인이 되어있지 않는 상태로 userPage에 들어가게되면 자동으로 login으로 이동될 것이다.