react-paginate라이브러리 사용기

react-paginate

이번 프로젝트에 1000개의 데이터를 받아 뿌려주기 때문에 pagenation을 추가였다.
react-paginate라이브러리를 활용하였는데 받아온 데이터를 짤라 뿌려주는 방식이었다.

import ReactPaginate from "react-paginate";

임포트를 해준뒤

// 한 페이지당 보여줄 갯수
  const perPage = 10;
  // 현재 페이지
  const [currentPage, setCurrentPage] = useState(0);

  // selectedPage 현재 페이지의 번호
  // 버튼을 누를때마다 호출됨
  const handlePageClick = ({ selected: selectedPage }) => {
    setCurrentPage(selectedPage);
  };

  // 현재 페이지의 시작 인덱스를 계산
  const offset = currentPage * perPage;
  // contents에 들어온 리스트를 slice로 잘라서 자르고 싶은 index 갯수 만큼 자르고 pagedContents에 저장함
  // ex) 0번째 인덱스이면 0 * 10 이기 때문에 0번째 인덱스부터 0 + 10 그러니까 0~10까지 자른 배열을 map으로 돌려줌
  // ex) 1번째 인덱스이면 1 * 10 이므로 10번째부터 10+10 까지 10~20까지 자른 배열을 map으로 돌림
  const pagedContents = contents.slice(offset, offset + perPage);
  //  pageCount={Math.ceil(contents.length / perPage)}
  // Math.ceil은 소수값이 존재할때 값을 올려준다.
  // contents에 들어와있는 11개의 게시물을 perPage 한페이지당 보여줄 갯수인 10 개로 나누어 몇 개의 페이지가 필요한지 구한 것

인덱스 계산하는 로직을 작성해 준 뒤

<>
      <div>
        {pagedContents.map((item, index) => (
          <BoardItem key={index} title={item.writer} content={item.title} id={item.id} contents={contents} like={item.like} />
        ))}
      </div>
      <ReactPaginate previousLabel={"<"} nextLabel={">"} pageCount={Math.ceil(contents.length / perPage)} onPageChange={handlePageClick} containerClassName={"pagination"} activeClassName={"active"} />
    </>

이렇게 뿌려주었다.
containerClassName={"pagination"} activeClassName={"active"}처럼 classname을 줄 수 있어 css파일을 따로 만들어 import 해준 뒤 커스터 마이징을 해줬다.