Pagination vs Infinite Scroll

Pagination

Pagination은 여러개의 게시물을 보여주는 곳에서 많이 사용된다. 보통 게시글 목록의 하단의 나타나는 숫자가 pagination이다. 숫자를 눌렀을 때 그 페이지 목록으로 이동한다.

pagination은 api를 이용하여 구현할 수 있다. 물론 직접 코드를 쳐가면서 구현을 할 수 있지만 시간도 많이 걸린다. 또 그만큼 에너지도 소모가 되기 때문에 api를 이용하는 것을 추천한다.

사람들이 많이 이용하는 api는 react-js-pagination을 많이 사용한다.

npm i react-js-pagination

먼저 설치를 해준다.

import React, { useState } from 'react';
import './Pagination.css';
import Pagination from 'react-js-pagination';
const Paging = () => {
  const [page, setPage] = useState(1);
  const handlePageChange = page => {
    setPage(page);
  };

  return (
    <Pagination
      activePage={page}
      itemsCountPerPage={10}
      totalItemsCount={50}
      pageRangeDisplayed={5}
      prevPageText="‹"
      nextPageText="›"
      onChange={handlePageChange}
    />
  );
};
export default Paging;

먼저, pagination의 속성들을 보면
activePage는 현재 페이지를 나타내준다. 위에 useState로 상태를 관리해준다.
itemsCountPerPage는 한 페이지당 보여줄 리스트들의 갯수를 정해주는 속서이다.
totalItemsCount는 리스트들의 총 갯수를 적는 속성이다.
pageRangeDisplayed는 pagination에서 보여줄 페이지의 범위를 설정해준다.
prevPageText는 이전 페이지를 보여줄 텍스트를 적어준다.
nextPageText는 다음 페이지를 보여줄 텍스트를 보녀준다.
onChange는 페이지가 바낄 떄 실핸되는 함수를 관리 해준다.
onChange 같은 경우 실행이 되었을 때 값을 받아서 setPage로 page의 상태를 바꿔주서 activePage의 값을 바꿔준다.

Infinite Scroll

infinite Scroll은 무한 스크롤로 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식이다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 할 수 있다.

무한 스크롤도 api가 있다. react-infinite-scroller를 알아보자

yarn add react-infinite-scroller

설치를 해준다.

< InfiniteScroll 
    pageStart = { 0 } 
    loadMore = { loadFunc } 
    hasMore = { true  ||  false } 
    loader = { < div  className = "loader"  key = { 0 } > Loading ... < / div > } 
> 
    { items } // <-- 로드하려는 내용입니다. 
< / InfiniteScroll >

보여주고 하는 항목에 InfiniteScroll 로 감싸준다.
pageStart는 로드할 첫 번째 페이지의 번호이다 기본값은 0 이다.
loadMore은 상용자가 더 많은 항목을 요청할 때 실해되는 함수를 넣어준다. 즉, 사용자가 아래로 스크롤 할 때 함수가 실향이 된다.
hasMore은 로드할 항목이 더 있느지에 대한 여부를 묻는 부분이다.
loader는 항목이 로드가 되는 동안 그 항목들을 구성할 리엑트의 구성요소를 적어준다.