Pagination vs Infinite Scroll

✅ Pagination

---

• Pagination : 검색 결과를 가져올 때 데이터를 쪼개 번호를 매겨 일부만 가져오는 기법

• 사용자가 게시판, 상품 목록 등을 요청할 때 결과 값을 전부 가져오면 느려지며 사용자는 불편을 느끼게 된다.

• 그래서 데이터를 조금씩 나눠서 가져오고 사용자가 원하는 경우 데이터를 가져오게 되면 위와 같은 문제를 해결할 수 있다.

📂 Pagination 종류

• Offset : Offset과 limit 예약어를 통하여 select의 전체 결과 중 일부만 가져오는 방법
• Cursor : cursor가 가리키는 레코드부터 일정 개수만큼 가져오는 방법

📂 Offset

• 처리 방식 : 페이지 당 요청하는 자료의 개수와 현재 페이지 번호를 파라미터로 요청

• Offset : (현재 페이지 번호 - 1)*페이지 당 요청하는 자료 개수

  

• 장점 : 쿼리가 단순 / 다양한 정렬 방식을 쉽게 구현 / pagination bar 구현 가능

• 단점 : 뒷부분 쿼리 시 속도 저하 / 데이터 누락 / 데이터 중복

✅ Infinite Scroll

---

• 정보를 한꺼번에 가져와서 보여주기엔 정보량이 많거나 무거워서 api fetch로 받는 결과가 느릴 때

• 스크롤을 통해 아주 작은 일부분만 가져와 추가로 보여주면서 사용자 경험을 높이는 기술이자 인터페이스

• react infinite scroller

yarn add react-infinite-scroller

💡 타입스크립트 오류가 발생하는 경우

yarn add -dev @types/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 },
      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>
  );
}

✅ Infinite Scroll VS Pagenation

---

📂 Infinite Scroll

• 장점
  • 사용자 참여 및 콘텐츠 탐색이 쉽다.
  • 클릭하는 것보다 더 나은 사용자 경험을 제공한다.
  • 모바일에 적합하다
• 단점
  • 스크롤을 해서 가져오는 정보가 많아질 수록 페이지 성능이 느려진다.
  • 정보 탐색이 힘들다.
  • 스크롤 막대로 정확한 정보량을 알 수 없다.
  • 푸터를 찾기 힘들다.

📂 Pagenation

• 장점
  • 사용자 의도에 맞게 페이지를 넘길 수 있다.
  • 사용자가 페이지에 통제감을 느낄 수 있다.
  • 특정 항목의 위치를 파악 및 찾기가 쉽다.
• 단점
  • ‘클릭’ 혹은 ‘다음페이지’를 클릭해야되는 번거로움이 있다.
  • 한페이지에서 매우 제한된 내용을 본다.