Pagination와 Infinite Scroll

페이지네이션이란??

페이지이란 디지털 콘텐츠를 페이지 별로 구분하는 방법이다!
쉽게 설명하자면 게시판에 일정 갯수의 글을 한 페이지씩 담는 방법이다!

이렇게 페이지 별로 글이 나누어져 있다!!

무한 스크롤이란??

무한 스크롤은 유저가 페이지 하단에 도달했을 때 콘텐츠가 계쏙 로드되는 방식이다!!
즉 새로운 데이터가 계속해서 추가되는 방식이다!!

https://www.npmjs.com/package/react-infinite-scroller
리액트에서 자주 사용하는 무한 스크롤 라이브러리이다!
설치 명령어: yarn add react-infinite-scroller

무한 스크롤 구현!

import { useQuery, gql } from "@apollo/client";
import type {
  IQuery,
  IQueryFetchBoardsArgs,
} from "../../../src/commons/types/generated/types";
import InfiniteScroll from "react-infinite-scroller";

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage(): JSX.Element {
  const { data, fetchMore } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

  const onLoadMore = (): void => {
    if (data === undefined) return; // 데이터가 없으면 바로 반환하기 위해서 작성

    void fetchMore({
      variables: { page: Math.ceil((data?.fetchBoards.length ?? 10) / 10) + 1 }, // 페이지를 10 단위로 나누기 위해서 작성!
      updateQuery: (prev, { fetchMoreResult }) => {
        if (fetchMoreResult.fetchBoards === undefined) {
          return {
            fetchBoards: [...prev.fetchBoards],
          };
        } // 만약 다음글이 없다면 현재 글을 보여주기 위해서 이프문을 작성하였다!

        return {
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards],
          // 전체게시글 : 이전 게시글 + 다음 게시글
        };
      },
    });
  };

  return (
    <div>
      <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={true}>
        {data?.fetchBoards.map((el) => (
          <div key={el._id}>
            <span style={{ margin: "10px" }}>{el.title}</span>
            <span style={{ margin: "10px" }}>{el.writer}</span>
          </div>
        )) ?? <div></div>} 
      </InfiniteScroll>
    </div>
  );
}
// map 함수를 사용하여 게시글을 불러옴!