페이지네이션과 무한스크롤에 대해 알아보자
페이지네이션
페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법
위와같이 해당 페이지를 클릭하면 서버에서 해당 페이지의 번호에 등록되어 있는 데이터들을 받아오는 방식이다
다음페이지(">")를 클릭시 시작번호에 10을 더해 11부터 페이지를 뿌리고
이전페이지("<")를 클릭시 시작번호 -10을하여 뿌린다
만약 1페이지 미만으로 가려고 할시 아무런 동작을 안하게 설정했고
게시물이 마지막 페이지에 도달시 10개가 아닌 해당 게시물이 있는 페이지 번호까지만 표시되게 구현했다
무한스크롤
유튜브 또는 페이스북과 같이, 페이지를 아래로 스크롤 하다가 종단점에 도달하면 새로운 데이터를 요청하여 무한으로 계속 이어지는 방식이다
본 gif는 한번에 댓글을 최대 10개씩 받아오는 API를 무한스크롤을 이용하여 계속해서 다음 댓글을 요청하여 표시하고 있는것이다
react infinite scroller 와 Apollo-Client의 useQuery에서 제공하는 fetchMore 함수를 함께 사용해 만들었다
스크롤이 하단 끝에 닿았을 때 실행되는 react infinite scroller의 loadMore에 fetchMore을 사용하여 받아온 데이터가 있다면 기존 데이터에 추가하여 화면에 뿌리고, 없을시 기존 데이터만 화면에 뿌리도록 했다
