아찔한 리액트의 무한 요청

 

// 시작할 때, 프로필 편집 화면에서 뒤로 왔을 때 fetch
  useEffect(() => {
    const fetchMyInfo = async () => {
      try {
        const result = await getMyInfo();
        setMyInfo(result.data);
      } catch (err) {
        alert("예상치 못한 문제가 발생했습니다.");
      }
    };
    fetchMyInfo();
  });

프로필 편집 후 뒤로 왔을 때 단순히 refetch하면 간단할 것이라 생각했다. 그래서 useEffect의 두번째 인자인 업데이트 트리거 배열을 []에서 아예 없애버렸다. 그랬더니 setMyInfo에 의해 state가 변하면서 계속 useEffect 함수가 호출된다.

노트북이 뜨거워지길래 뭐지 싶었는데 서버 로그를 확인해보니 1초에 한번 이상으로 굉장히 빠르게 로그가 찍히고 있었다. 아찔했다. 이러다 AWS에서 과금이 청구될 지도 모른다는 생각이 들었다.

 

stackoverflow와 react-navigation의 공식 문서를 참고했다.

navigation에 'focus' 이벤트에 대한 핸들러를 추가해주면 된다. unmount 시 이 리스너를 제거해주는 게 좋다.

 

변경 후

// 시작할 때, 프로필 편집 화면에서 뒤로 왔을 때 fetch
  useEffect(() => {
    // myInfo fetch
    const fetchMyInfo = async () => {
      try {
        const result = await getMyInfo();
        setMyInfo(result.data);
      } catch (err) {
        alert("예상치 못한 문제가 발생했습니다.");
      }
    };
    // 스크린으로 이동 시 fetch
    const unsubscribe = navigation.addListener("focus", () => {
      fetchMyInfo();
    });
    return unsubscribe;
  }, []);

이제 다행히 무한 번 요청하지는 않는다.

하지만 바텀 탭을 통해 다른 스크린으로 이동한 뒤 다시 돌아오면 refetch가 일어난다. 

프로필 편집 화면에서 제출했을 때만 refetch가 되기를 원하는데 이건 좀 고민해봐야 할 문제 같다.