오늘 겪은 트러블 슈팅... 도움을 주신 진철님께 (자주 등장) 감사를 드리며 🥲
사용자 상태 렌더링 (새로 고침 없이 상태가 안바뀌는 현상) 에 대한 트러블 슈팅을 남기겠다.

사용자 상태 렌더링 (새로 고침 없이 상태가 안바뀌는 현상)

이슈 개요

• 사용자 상태 랜더링(유저 네임)이 로그인시 변경되어야 하는데,
  로그인 후에도 변경되지 않는 현상

상세내용

• 로컬스토리지에 저장된 usename을 이용해 사용자 상태의
  유저네임을 변경해 주는 로직을 만들었다.
• 아래 코드와 같이 로컬스로리지에 데이터를 불러오고 난 뒤 setIsLoggedIn(true)로 변경해주어 사용자 상태 렌더링을 변경해주는 로직이다.

//ts
useEffect(() => {
    const storedResponse = localStorage.getItem('response');
    if (storedResponse) {
      const parsedResponse = JSON.parse(storedResponse);
      const username = parsedResponse.user.username;
      setUser({ userName: username });
      setIsLoggedIn(true);
    }
    console.log(storedResponse);
  }, []);

// html
{isLoggedIn ? (
          <>
            <Link to={`/mypage`}>{user?.userName}님</Link>
            <Link to="#" onClick={handleLogout}>
              로그아웃
            </Link>
          </>
        ) : (
          <>
            <Link to={`/login`}>로그인</Link>
            <Link to={`/signup`}>회원가입</Link>
          </>
        )}

그러나 로그인 뒤에도 상태 변경이 일어나지 않았다...ㅠㅠ

새로고침을 해야만

로 변경되는 이슈가 발생 🚨

트러블슈팅

원인

헤더가 랜딩했을 때 마운트 되었지만 로그인 이후에는 useEffect가 실행되지 않았다... 콘솔을 덕지덕지 찍어보았더니 useEffect 이하.. 코드들이 실행되지 않더라...

해결

• 로그인 했을 때 트리거가 필요하여, useEffect 디팬던시 어레이[]에 트리거 요소로 path를 이용해줌
• useLocation을 이용하여 path name으로 주소가 바뀔때 마다 useEffect가 실행 되도록, 디팬던시 어레이에 넣어주어 해결!

  const { pathname } = useLocation();
  useEffect(() => {
    const storedResponse = localStorage.getItem('response');
    if (storedResponse) {
      const parsedResponse = JSON.parse(storedResponse);
      const username = parsedResponse.user.username;
      setUser({ userName: username });
      setIsLoggedIn(true);
    }
    console.log(storedResponse);
  }, [pathname]);