Pagination & Infinite Scroll

게시글이나 댓글 등 목록화 되어있는 데이터를 받아올 때 한꺼번에 모든 데이터를 받아올 수 없기때문에 일정 양만큼 나누어 받아와야 한다.
예를 들어 게시판의 게시글이 999개가 있을 때, 한 페이지에 10개의 게시글씩 나눈다면 100개의 페이지가 생길 것이다.
이런 작업을 Paginiation이라고 한다.
pagination에는 목록 하단에 페이지 리스트를 띄우는 방법과 스크롤을 할 때 추가 데이터를 받아오는 방법이 있다.
개인적으로 전자는 pc환경에 더 적합하고(네이버 카페 등) 후자는 모바일에 더 맞는다고 생각한다(instargram등).
pagination 형식1

const onClickPage = (e) => {
    refetch({ page: Number(e.target.id) });
    // setNowPage(Number(e.target.id));
  };
  const onClickPrevPage = () => {
    if (startPage === 1) return;
    setStartPage((prev) => prev - 10);
    refetch({ page: startPage - 10 });
  };
  const onClickNextPage = () => {
    if (lastPage - startPage < 10) {
      return;
    }
    setStartPage((prev) => prev + 10);
    refetch({ page: startPage + 10 });
  };

  // 현 페이지 바로 다음, 이전 넘어가기
  // const [nowPage, setNowPage] = useState(1);
  // const onClickPrevPage = () => {
  //   refetch({ page: nowPage - 1 });
  //   setNowPage(Number(nowPage - 1));
  // };
  // const onClickNextPage = () => {
  //   refetch({ page: nowPage + 1 });
  //   setNowPage(Number(nowPage + 1));
  // };
  return (
    <div>
    
      <span onClick={onClickPrevPage}>이전</span>
      {/* 페이지 목록  */}
      {new Array(10).fill(1).map(
        (_, index) =>
          index + startPage <= lastPage && (
            <span
              key={index + startPage}
              onClick={onClickPage}
              id={String(index + startPage)}
            >
              {` `}
              {index + startPage}
            </span>
          )
      )}
      {` `}
      <span onClick={onClickNextPage}>다음</span>
    </div>
  );

주석처리한 부분은 다음 10페이지로 넘어가는 것이 아니라 바로 다음 페이지(예 3->4)로 넘어가는 방식이다.

이렇게 직접 코드를 짤수도 있고 library에 있는 기능을 활용할수도 있다.
페이지네이션 라이브러리(바로가기)

스크롤방식의 라이브러리(바로가기)