<aside> 💡 서버와 통신하여 상태관리를 하는 경우, 새로고침후 상태가 바로 반영이 되지 않는 경우가 있다. 이럴때 어떻게 최신화를 시키는지 정리해보자

</aside>

useEffect의 Dependency설정하기

React에서 특히나, function component를 사용하고 있는데, 제대로 상태가 업데이트 되지 않거나, 과도하게 서버에 통신을 보내고 있는 경우는 대부분 useEffect의 dependency를 제대로 주지 못했기 때문이다.

아마 리액트에서 useEffect를 한번이라도 사용해 봤다면, 아래의 기본적인 규칙은 알고 있을 것이다.

dependency를 비워 놓게 되면 effect가 계속 실행되고, dependency에 [] 빈 배열을 넣게 되면, 처음 렌더될때 effect가 한번 실행되고, dependency에 [sth]을 넣게 되면, 처음렌더 될때 한번, 그리고 sth이 변화할때마다 effect가 실행되게 된다.

const SideBar = () => {
  const [toggleState, setToggleState] = useState(1);
  const [friends, setFriends] = useState([]);
  const [loading, setLoading] = useState(false);
  const cookies = new Cookies();
  const userInfo = cookies.get("userInfo");

  const path = useParams();
  const { userListRef } = useDM(userInfo, path);

  const getFriendsListHandler = async () => {
    const res = await axios.get(`${ENDPOINT}/friends/lists`, {
      withCredentials: true,
    });
    const givenFriends = res.data.data;
    const temp = [];
    for (let i = 0; i < givenFriends.length; i++) {
      for (let j = 0; j < userListRef.current.length; j++) {
        if (givenFriends[i].nickname === userListRef.current[j].nickname) {
          temp.push(userListRef.current[j]);
        }
      }
    }
    setFriends(temp);
  };
  ~~useEffect(() => {
    setLoading(true);
    getFriendsListHandler();
    setLoading(false);
  }, [toggleState, loading]);~~

useEffect(() => {
    setLoading(true);
    const delayReq = setTimeout(() => {
      getFriendsListHandler();
      setLoading(false);
    }, 300);

    return () => clearTimeout(delayReq);
  }, []);

Try

🥲1. toggleState를 dependency로 넣기

아래의 코드에서 상태관리하고 있는 friends가 처음부터 제대로 나오길 바랬으나, 나오지 않았고, toggleState를 dependency로 넣고 나니, 토글을 변경하고 나서야 제대로 출력되는 것을 볼 수 있었다.

결론적으로 내가 원하는 바는 아니었다.

🥲2. friends || setFriends || getFriendsListHandler를 dependency로 넣기

friends, setFriends, getFriendsListHandler 각각 dependency로 넣어줘 봤다. 결과는 내가 원하는 대로 처음부터 렌더 되는 모습을 볼 수 있었지만, 하지만, 당연하게도 서버에 미친듯이 요청을 보내게 되는 것을 볼 수 있었다.

🥲3. loading상태를 만들고 dependency로 넣기

useEffect를 실행할때, true상태값을 가지고, effect가 끝난 후 false값을 가지게 되는 loading이라는 상태를 만들고, 해당 상태를 dependency로 넣으니, 서버에도 요청을 한번만 보내고, 출력값도 내가 원하는 대로 처음부터 제대로 렌더되는 것을 확인 할 수 있었다. 분명히 되는 줄 알았지만 ㅋㅋㅋㅋㅋㅋㅋㅋ 되지 않는다. 1번과 똑같다.