로그인된 사용자, 로그인 페이지에서 홈으로 리다이렉션 시 UI 깜빡임 문제 이슈

잠깐이지만 로그인 ui가 나오고 홈으로 리다이렉션이 되는 이슈가 발생했다.

 

한참 코드를 살펴보고 검색해보고 했는데.. 원인을 알게되었다.

 

이슈가 발생했을 때 다음코드로 리다이렉션을 처리해줬는데,

  const navigate = useNavigate();

  navigate('/')

 

위의 코드를 아래와 같이 바꾸니까 이슈가 해결되었다.

 import { Navigate } from 'react-router-dom';

 <Navigate to={from} replace />;

 

챗지피티에 물어본 결과 Navigate와 useNavigate의 차이점은 다음과 같았다.

• Navigate: JSX 내에서 컴포넌트가 렌더링될 때 자동으로 리디렉션을 발생시키며, 조건부 렌더링과 함께 사용됩니다.
• useNavigate: 코드 내에서 동적 네비게이션을 수행할 때 사용하며, 함수 호출을 통해 네비게이션을 트리거합니다.

 

개인적인 생각이지만 Navigate는 로그인된 사용자가 또 다시 로그인 페이지에 들어갔을 때 활용하면 좋을것 같고,

useNavigate는 프로텍트 라우터를 훅으로 구현했을때 활용하면 좋을것 같다.