Pagination/ Infinite-Scroll

Pagination

• Pagination은 여러 개의 게시물을 보여주는 UI이다.
• 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법이다.
• Pagination을 사용하기 위한 방법.
  1 . fetchBoards API를 이용해 게시글 목록을 불러온다.
  2 . 페이지를 클릭 했을 때 게시글 목록 데이터를 다시 불러오기 위해 refetch를 사용한다. ex) refetch({page: Number(event.target.id)})
  3 . map을 이용해서 페이지네이션을 구현한다. ex) {new Array(10).fill(1).map((el, index) => (
  key={index + startPage}
  id = {String(index + startPage)}
  )
  4 . lastPage를 설정해준다. 먼저 총 개수를 불러와서 마지막 페이지 값을 구한다. ex) const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);
  5 . 마지막 startPage + 10이 lastPage보다 클 경우 하단 스크립트를 실행하지 않는다라는 if문을 만들어준다. ex) if(startPage + 10 > lastPage) return;
  setStartPage((prev) => prev + 10)

Infinite-Scroll

• 무한스크롤을 얘기한다.
• 라이브러리를 사용할 수 있다. 사용하지 않고 할 수 있는 방법도 있다.
• 라이브러리를 사용하지 않을 때 useRef를 사용할 수 있다.