무한 스크롤 관련 트러블 슈팅

프로젝트에서 react-query 도입해서 useInfiniteQuery를 사용해 무한스크롤을 구현하는 와중에 스크롤을 내리고
데이터를 한번 더 받아오는 요청 과정에서 페이지가  리렌더링 되면서 스크롤도 다시 맨 위로 올라가는 오류가 있었다.

처음에는 intersection-observer를 사용해서 작성하다 보니 내가 쓴 로직에 문제가 있는 것 같아서

react-intersection-observer를 사용해서 로직을 바꿔보았지만 문제는 해결되지 않았다.

혹시 이전에 데이터와 새로 받아온 데이터를 하나의 배열로 묶어줘야 하는 생각에 flatMap이라는 것도 발견해서 시도를 해보았다.

참고 블로그 : https://velog.io/@movie/react-query-flatMap%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%95%EC%A0%9C%ED%95%98%EA%B8%B0

 

하지만 전혀 해결되지 않았다.. 

3일간의 삽질 끝에 드디어 그 원인을 알 수 있었는데 

isFectching

페이지를 렌더링 하기 전에 isLoading 상태와 isFetching, data.page에 데이터가 없다면 렌더링 되지 않게 처리해 주었던 부분에 문제가 있었다.

isFetching과 isLoading의 차이점을 파악하지 못해 생긴 문제였던 것 같다

isLoading과 isFetching은 비슷하게 '로딩'이라는 개념을 사용하지만 기존에 캐시 된 데이터가 있느냐 에 따라 다르다.

isLoading은 어떤 데이터를 처음 가져올 때 사용하면 되고, isFetching은 데이터를 다시 가져와야 할 때 사용하면 된다고 알고 있다. 이런 문제에서 데이터가 신선하지 않아 다시 가져오면서 페이지가 새로고침 되었던 것 같다.

isFetching을 제거해 주자 정상적으로 잘 동작했다..

72시간이 isFetching과 함께 사렸지만(모니터 부숴버릴 뻔)

그래도 트러블 슈팅 과정에서 flatMap,  intersection-observer , react-intersection-observer의 사용법을 더 공부하게 되면서
무한스크롤 관련해서도 많은 공부를 할 수 있었던 것 같다.