React | react-paginate로 빠르게 페이지네이션 구현하기

1. react-paginate install

$ npm install react-paginate

 

2. 페이징 처리 할 컴포넌트에 import

import ReactPaginate from "react-paginate";

 

3. 필요에 맞게 커스텀 하여 사용

• pageCount - 총 게시글의 개수(총 row 수)
• pageRangeDisplayed - 한 페이지에 표시할 게시글의 수
• marginPagesDisplayed - 
• breakLabel - 페이지 수가 많을 경우 건너뛸 수 있는 버튼
• previousLabel - 이전페이지로 가는 버튼의 value값
• nextLabel - 다음페이지로 가는 버튼의 value값
• onPageChange - 페이지 버튼을 눌렀을 때 일어나는 이벤트 이를 이용해 페이지 증감
• containerClassName - css적용할 때 사용
• activeClassName - 현재 페이지에 css처리해주기 위한 클래스명을 적으면 됨
• previousClassName/NextClassName - 이전/다음버튼 css적용위한 클래스명을 적으면 됨

<ReactPaginate 
    pageCount={Math.ceil(totalRecords / 10)}
    pageRangeDisplayed={10}
    marginPagesDisplayed={0}
    breakLabel={""}
    previousLabel={"이전"}
    nextLabel={"다음"}
    onPageChange={changePage}
    containerClassName={"pagination-ul"}
    activeClassName={"currentPage"}
    previousClassName={"pageLabel-btn"}
    nextClassName={"pageLabel-btn"}
/>  

 

실제 적용 모습

 

 

+ 참고

react-paginate