화면에 보이는 페이지를 처리하는 방식으로 크게 페이지네이션과 무한스크롤방식이 있다.

페이지네이션 (Pagination)

페이지네이션은 페이지의 번호를 클릭해서 페이지를 이동하는 방식이다. (ex. 메일보관함, 게시판, 쇼핑몰 등)

방법
1. fetchBoards API를 활용해서 게시글 목록을 불러온다.
2. 페이지 클릭시 게시글 목록 데이터 다시 불러오기
graphQL의 useQuery에서 제공하는 refetch 함수를 활용하여 페이지 클릭 시 해당 페이지에 해당하는 데이터를 다시 불러올 수 있다.
3. map 메서드를 활용해 페이지네이션 번호 만들기
4. 등록된 총 게시물 개수를 불러와 마지막 페이지 값 설정하기

무한스크롤 (Infinite Scroll)

무한스크롤은 페이지를 아래로 스크롤했을때 새로운 데이터가 계속 추가되어 스크롤을 계속 가능하게 하는 페이지 처리 방식을 말한다.
(ex. 페이스북/인스타그램 등)

가장 많이 사용되는 무한스크롤 라이브러리는 react infinite scroller 이다.
https://www.npmjs.com/package/react-infinite-scroller

무한스크롤을 적용하기 위해 <IniniteScroll>을 태그하고
loadMore을 통해 스크롤이 하단에 닿았을때 추가 데이터를 불러오도록 한다.

Apollo-Client의 useQuery에서 제공하는 fetchMore 함수를 함께 사용하여 다음 페이지에 해당하는 데이터를 이어갈 수 있다.