문제

기존

: 사용자가 보는 window 높이와 사용자의 현재 스크롤 위치를 더한 값이 페이지 내의 총 높이와 같아지면 page에 1씩 더해서 서버에 요청하는 방식

문제

: 다음 페이지의 값이 없어도 계속 요청이 가게됨

불필요한 서버 요청이라 생각이 들어 마지막페이지일때 요청을 멈추게 할 필요성을 느낌

생각난 해결방법

1. 백엔드에게 마지막페이지인지 아닌지를 boolean 값으로 받는다

2. 리액트 쿼리에서 제공해주는 함수인 useInfinityQuery 이용한다.

시도 1)

서버에게 마지막페이지인지 아닌지에 대한 boolean값을 받아 마지막 페이지가 아닐때만 page를 1씩 더하는 방법을 시도했다

무한스크롤 동작은 잘되지만 중간에 게시글을 눌러 상세페이지로 넘어갔다가 뒤로가기를 하면 마지막 페이지의 정보만 남아있고 앞 페이지의 정보는 없어짐. 더불어 스크롤 위치또한 top으로 올라감.

네트워크창 확인해보니 페이지 1을 불러오고 이 페이지의 정보가 배열에 저장되기 전에 페이지 2의 정보가 불러와져서 페이지 1의 정보는 없어지고 스크롤이 위로 올라가는 것이었음.

시도 2)