[react] 새로고침해야 게시물 뜨는 문제

문제

로그인 / 로그아웃을 firebase 인증을 통해 하고, user 정보에 따라 내가 쓴 글만 보여야하는데

로그인을 하면 이전 로그인을 했던 user의 게시글이 보이고 새로고침을 해야 그때부터 지금 user가 쓴 게시물이 보임 

 

 

해결

그냥 ..

user를 state로 관리를 안한거였음 😮‍💨 

또 user가 변하는 것에 따라 게시물을 가져올 수 있게 useEffect dep에 user를 추가해줬어야했다 😨

 

// const user = JSON.parse(localStorage.getItem("user")); 이렇게 되어있었음
const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));
const uid = user && user.uid;

 

이렇게 수정하고 login 컴포넌트에 setUser를 props로 넘겨서 로그인했을때 user을 지정해주었다.

 

signInWithEmailAndPassword(auth, id, password)
      .then((userCredential) => {
        const user = userCredential.user;

        localStorage.setItem(
          "user",
          JSON.stringify({
            uid: user.uid,
            email: user.email,
          })
        );
        setUser(JSON.parse(localStorage.getItem("user")));

        alert(`${user.email}님 todoto를 즐겁게 사용해주세요 !`);
        navigate("/todos");
      })

 

그리고 글을 처음에 불러올 때 uid(user)가 변할 때마다 내가 쓴 글만 볼 수 있게 useEffect의 deps에 uid를 추가해주었다.