Pagination ? Infinite Scroll ?

웹사이트를 구현하면서 다양한 데이터를 보여줘야할 때 데이터를 로드해오는 여러가지 방식이 있는데 대표적으로 페이지네이션과 무한스크롤이다.

• Pagination : 데이터를 또 다른 페이지로 분리하는 방법. 사용자는 페이지 하단에 있는 숫자 형식의 링크를 클릭하여 페이지를 이동해 데이터를 확인할 수 있다.
• Infinite Scroll : 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 데이터가 계속 로드되는 사용자 경험(UX, User EXperience) 방식.

Pagination vs Infinite Scroll

	pagination	infinite Scroll
목적	특정 목적을 가지는 내용을 검색	목적없이 검색
다음 데이터 확인	클릭으로 이동	스크롤
데이터 위치 확인	페이지통해 위치 확인 가능	데이터 위치 확인 어려움
데이터 관리	특정 데이터만 표출	스크롤마다 데이터 쌓임
용도	PC 최적화	모바일 최적화

두 가지 방법 중 무엇을 사용할지는 웹사이트의 목적에 따라 달라진다.
페이지네이션은 사용자가 특정한 콘텐츠를 찾고 있는 웹사이트에 적절하고 무한 스크롤은 모바일 기기 사용자가 무언가 흥미로운 콘텐츠를 보기 위해 목적 없이 검색하는 상황에서 더 적절하다.

---

💡 State 사용 차이

페이지네이션 구현 시,
변수 및 함수 설정으로 클릭 후 페이지 이동, refetch로 관련 데이터 조회

//관련 코드
const [startPage, setStartpage] = useState(1);

  const onClickMovePage = (event: MouseEvent<HTMLSpanElement>) => {
    props.refetch({ page: Number(event.target.id) });
  };

  const onClickPrev = () => {
    if (startPage === 1) return;
    setStartpage((prev) => prev - 10);
    props.refetch({ page: startPage - 10 });
  };

  const onClickNext = () => {
    if (startPage + 10 > props.LastPage) return;
    setStartpage((prev) => prev + 10);
    props.refetch({ page: startPage + 10 });
  }; 

무한스크롤 구현 시(infinite-scroller 라이브러리 이용),
기존에 조회한 데이터와 fetchMore로 추가로 기존 데이터에 배열로 다음 데이터를 이어서 조회하는 방식으로 코드 구현

//관련 코드
 const { data, fetchMore } = useQuery(FETCH_BOARD_COMMENT, {
    variables: { page: 1, boardId: String("61f3d4be8cd4860029b48f16") },
  });

  const LoadComment = () => {
    if (!data) return;

    fetchMore({
      variables: {
        page: Math.ceil(data?.fetchBoardsComments.length / 10) + 1,
        boardId: String("61f3d4be8cd4860029b48f16"),
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult.fetchBoardComments)
          return { fetchBoardComments: [...prev.fetchBoardComments] };

        return {
          fetchBoardComments: [
            ...prev.fetchBoardComments,
            ...fetchMoreResult.fetchBoardComments,
          ],
        };
      },
    });
    console.log(Error);
  };

코드 관련 상세.. 👉🏻 [관련 블로그, 무한스크롤 라이브러리, 20220127 TIL]