TIL | React 페이지네이션 (react-paginate ... )

23.07.19

1. react-paginate로 React 페이지네이션 구현하기

프로젝트에서 댓글을 페이지네이션으로 구현하게 됨
페이지네이션이 어렵다는 걸로 알고 있어서 걱정했는데
npm에서 페이지네이션 관련 react-paginate라는 라이브러리를 제공하고 있고
이 라이브러리를 사용하면 비교적 간편하게 페이지네이션을 구현할 수 있다고 해서 설치

1-1. react-paginate 설치

npm install react-paginate
yarn add react-paginate
설치는 위에 둘 중에 하나 선택해서 설치해주면 됨

npm 문서 아래에는 예시 코드와 제공해주고 있는 props들에 대해 나와있는데 그걸 기반으로 페이지네이션을 구현하면 됨

하지만 그냥 무작정 라이브러리부터 설치한 나는 로직이 아예 이해가 되지 않았고 관련 유튜브 영상 하나와 다른 분이 올려주신 블로그를 보고 좀 이해하기 시작 ,,,

1-2. 페이지네이션 코드

import ReactPaginate from "react-paginate";

  // 현재 페이지의 데이터
  const [currentComments, setCurrentComments] = useState([]);
  // 전체 페이지 수를 저장
  const [pageCount, setPageCount] = useState(0);
  // 현재 (페이지) 데이터 배열에서의 시작 인덱스
  const [itemOffset, setItemOffset] = useState(0);
  // 한 페이지에 표시할 항목 수 (= 한 페이지에 표시할 배열 수) 
  const itemsPerPage = 5;

  useEffect(() => {
    // 한 페이지 내 (페이지) 데이터 배열의 마지막 인덱스
    const endOffset = itemOffset + itemsPerPage;
    
    // 전체 데이터 배열인 comments를 slice 메서드를 사용하여 itemOffset부터 endOffset 전까지의 데이터 배열만 현재 페이지의 데이터(= currentComments)로 담기게끔 해줌
    setCurrentComments(
      comments.slice(itemOffset, endOffset)
    );
    
    // 전체 데이터 배열 comments의 길이를 한 페이지에 표시할 항목 수인 itemsPerPage로 나누고 (소수점으로 나뉘면 올림으로 처리) 이를 pageCount에 담아줌
    setPageCount(Math.ceil(comments?.length / itemsPerPage));
  }, [itemOffset, itemsPerPage, comments]);

  const handlePageClick = (e) => {
    // 선택된 번호(= e.selected)와 한 페이지에 표시할 항목 수(= itemsPerPage)를 곱한 걸 전체 데이터 배열의 길이(= comments.length)로 나눈 나머지 값을 newOffset에 담아주고 새로운 인덱스 시작 번호로 itemOffset을 바꿔줌
    const newOffset = (e.selected * itemsPerPage) % comments.length;
    setItemOffset(newOffset);
    console.log(`사용자가 요청한 번호 ${e.selected}, 새로운 데이터 배열 시작 인덱스 ${newOffset} 설정`);
  };
  
return (
	<ReactPaginate
        breakLabel="..."
        nextLabel="> "
        previousLabel=" <"
        onPageChange={handlePageClick}
        pageCount={pageCount}
        pageRangeDisplayed={3}
        marginPagesDisplayed={1}
        renderOnZeroPageCount={null}
      />

)

1-3. 설명

• breakLabel : 페이지 수가 많을 경우 건너뛸 수 있는 버튼
• previousLabel : 이전 페이지로 가는 버튼
• nextLabel : 다음 페이지로 가는 버튼
• onPageChange : 페이지 이동을 하는 함수
• pageCount : 총 게시글의 개수 = 데이터 전체 배열
• pageRangeDisplayed : 현재 페이지 주변에 표시될 페이지 링크의 개수
• marginPagesDisplayed : 페이지 네비게이션의 맨 앞과 맨 뒤에 표시될 페이지 링크의 개수
• renderOnZeroPageCount : 페이지 수가 0일 때 페이지 네비게이션을 렌더링할지 여부를 설정

1-4. 레퍼런스

npm 공식 문서
참고 영상
참고 자료