쌤 로그인한 유저 또 로그인페이지 들어가는거막는거

[정중식]

const { user, loading } = useUser();

const navigate = useNavigate();
const location = useLocation();

const from = location?.state?.redirectedFrom?.pathname || '/';

useEffect(() => {
if (user) {
navigate(from);
 }
 }, [from, navigate, user]);

이렇게하는거아닌가요?..
useUser는 서버와 통신후 유저 정보가져오는 훅입니당.

근데 계속 input이 보인후에 튕깁니다.ㅠ.ㅠ..
useEffect로하면 안되나 싶어서

if (user) {
return navigate(from);
 }
이것만해줘봤지만, 에러가떠요
대충 JSX자식이없다 어쩌구 이러는데.. 이해가 가는 내용입니다.

콘솔찍어보니까
 user가 처음에는 언디파인이떳다가 -> 유저정보로 변합니다.

하지만 

{!loading && (
<Wrapper>
{socailLoginTemporaryTokenStatus.isNickname ? (
<SocialSignup />
 ) : (
<>
<Input type='email' placeholder='Email' />
<Input type='password' placeholder='Password' />

<SocialWrap>
<GoogleSocialAuth />
<RiKakaoTalkFill className='icon' />

<SiNaver className='icon' />
</SocialWrap>
</>
 )}
</Wrapper>
 )}
이렇게 조건문 처리를해줬기때문에 요소가 보이면 안된다 생각하는데도 계속 잠깐 인풋요소가 나왔다가 튕기네요..

아 로컬스토리지로 토큰을저장했으니까 그걸 가져와서 튕겨볼까?해서 
똑같이했는데도 이슈 그대로 발생하고있습니다.ㅠ.ㅠ

아 리코일에 저장해서해볼까?했는데도 그대로 발생하고있구여..
저는 왜이렇게 멍청한걸까요? 어떻게하면좋을까요..

[codingapple]

유저 정보를 props로 보내줘서 props에 뭐가 있으면 보여주지말라고 해봅시다
아니면 input화면으로 이동하는 링크만 막아도 될수도요

[정중식]

오 썜 저 이번에 깨달음을 얻었어요..

기존엔 const navigate = useNavigate();
navigate('/')를 사용했었는데요

이번엔
<Navigate to='/' />를 사용했습니다 그러니까 이제 이슈가 사라졌어요..!

챗지피티에 검색해보니까

Navigate와 useNavigate는 모두 React Router에서 제공하는 네비게이션 기능을 수행하지만, 그 방식과 사용 사례가 다릅니다. 라고하네요

 Navigate는 컴포넌트가 렌더링될 때 자동으로 사용자를 특정 경로로 리디렉션해야 할 때 사용한다고하네요..

역시 코딩애플 선생님은 갓이십니다
선생님한테 일단 질문올려놓고 계속삽질하다가 답장받고 또 다른 삽질을하다보면 해결실마리가 잡히더라구욘 ㅎㅅㅎ 
자 그럼 , 선생님 이제 저 취업시켜주시죠..

[글쓴이]

글