2023.08.28

무한스크롤 offset이 자꾸 늘어나는 버그가 있었다. 
useEffect를 통해 offset을 0으로 변경하고 있는데, 데이터를 불러올 때 ref에 닿아서 offset이 늘어나기 때문인것 같았다.

그래서 isLoading이며 isFetchin이며 여러 방법을 사용해 봤으나, 어떻게 해도 고치지 못하고 있던 찰나..

페이지를 이동할 때(un-mount) category를 기본값으로 세팅할 필요가 생겨 useEffect에 clean-up 함수를 줘서 사용하기로 했다.

그때 번뜩 떠올랐다! clean-up 함수는 useEffect의 의존성 배열이 변경되어 useEffect가 실행될 때도 발동 한다! 그렇다면 offset을 clean-up함수로 주면 되지 않을까?? 바로 테스트 해 봤다.

 

 

기존 코드

 useEffect(() => {
      setOffset(0);
      setList([]);
  }, [genres, category, years]);

어디서나 볼 수 있는 useEffect이다. genres, category, years가 변경되면 offset과 list를 초기화 하고있다.

 

 

clean-up 함수로 변경된 코드

 useEffect(() => {
    return () => {
      // console.log('클린업', offset);
      setOffset(0);
      setList([]);
    };
  }, [genres, category, years]);

clean-up 함수로 변경했다. 언마운트 될 때 또는 특정 종속성들이 변경될 때 이전 상태를 초기화하고 정리(clean-up)한다. 예를 들어, genres, category, years 중 하나라도 변경될 때 해당 useEffect가 다시 실행되며, 그 때에는 이전 상태를 초기화하고 새로운 상태를 설정한다 ( offset, List ).

 

 

테스트 결과는 만족스럽게도 정상 작동했다. 이거지!