Pagination

라이브러리 사용

• components/Paginations.jsx

import React from "react";
import Pagination from "react-js-pagination";
import { PaginationBox } from "./style";

export default function Paginations({ page, total, limit, handlePageChange }) {
  return (
    <PaginationBox>
      <Pagination
        activePage={page} // 현재 페이지
        itemsCountPerPage={limit} // 한 페이지당 보여줄 리스트 아이템의 개수
        totalItemsCount={total} // 총 아이템의 개수
        pageRangeDisplayed={5} // 보여줄 페이지의 범위
        prevPageText={"<"} // "이전"을 나타낼 텍스트
        nextPageText={">"} // "다음"을 나타낼 텍스트
        onChange={handlePageChange} // 페이지가 바뀔 때 헨들링해줄 함수
      ></Pagination>
    </PaginationBox>
  );
}

적용

• pages/DetailedProduct.jsx

  export default function DetailedProduct() {
  
  const [limit, setLimit] = useState(4);
  const [page, setPage] = useState(1);
  const offset = (page - 1) * limit;
  
  const handlePageChange = (page) => {
      setPage(page);
    };
  
  return(
  	<PaginationBox>
          <Paginations
            total={pageDetail.reviews ? pageDetail.reviews.length : 0}
            limit={limit}
            page={page}
            handlePageChange={handlePageChange}
          />
  	</PaginationBox>
  )