[web] React PrivateRoute 적용 시 무한 로그인 리다이렉트 발생

문제 요약

로그인하지 않은 사용자가 보호된 페이지로 접근 시 /login으로 이동시키는 PrivateRoute를 적용했으나,
/login 페이지에서 계속 리다이렉트가 발생해 무한 루프가 생김.

문제원인해결

 

증상	원인	해결
/login 페이지 접근 시 계속 /login으로 리다이렉트	isAuthenticated 초기값이 false라서 로그인 여부 확인 전에도 PrivateRoute가 실행됨	로딩 상태(loading)를 추가해 인증 체크가 끝난 후에만 PrivateRoute 실행
공개 페이지에서도 PrivateRoute 동작	/login 같은 공개 라우트를 PrivateRoute로 감쌈	/, /login, /register 등 공개 페이지는 PrivateRoute에서 제외

 

1. 초기값 문제

• isAuthenticated가 false로 시작 → API 응답 오기 전에도 보호 페이지 로직 실행
• /login 접근 시에도 Navigate("/login") 실행 → 무한 반복

2. 로딩 상태 미처리

• /api/user/me 호출은 비동기
• 응답이 오기 전 보호 로직 발동 → 잘못된 리다이렉트 발생
• loading 상태를 두어 인증 체크 완료 후에만 라우팅 실행

요약

PrivateRoute 사용 시	인증 체크가 끝나기 전에는 페이지 전환 금지 (로딩 상태 필수)
공개 페이지	/, /login, /register는 PrivateRoute에 포함하지 않기
상태 관리	isAuthenticated 초기값만으로 라우팅 결정하지 말 것