무한 스크롤 또 또 에러

에러

위의 사진은 개발자도구의 네트워크 창이다. 위의 사진처럼 요청도 계속보내게 되고 그에 따라 렌더링도 계속되는 현상이 발생했다.

 

원인

원인은 무한 스크롤에서 데이터를 불러오다가 더 이상 데이터가 없다면 page의 상태가 계속 바뀌면서 요청을 계속 보내게되고 그에 따라 렌더링이 되는 것이 원인이었다.

 

해결

page의 상태가 마지막 페이지를 넘어갔을때 더는 요청을 보내지 않도록 조건문을 작성해 해결했다.

// 수정 전
if (scrollTop + clientHeight >= scrollHeight - 100) {
  setPage((prev) => prev + 1);
}
    
// 수정 후
if (scrollTop + clientHeight >= scrollHeight - 100 && endPage >= isPage) {
  setPage((prev) => prev + 1);
}