react-paginate를 Bootstrap4에서 사용

개요

React에서 페이지네이션의 컴퍼넌트를 찾고 있어, 「react-paginate」라고 하는 컴퍼넌트를 발견했습니다만, 2019년 5월 시점에서 demo 코드가 Bootstrap4에 대응하고 있지 않았습니다. 그래서 Bootstrap4에 적응하기위한 샘플 코드를 설명합니다.

전제 등

React 버전은 16.8.6을 사용합니다. 또한 Redux를 넣은 상태에서 동작을 확인하고 있습니다.

Bootstrap 버전은 4.3.1을 사용하고 있습니다. 또한 Pagination 사양은 Pagination · Bootstrap을 참조하십시오.

react-paginate는 6.3.0을 사용합니다. react-paginate에 대한 자세한 내용은 react-paginate을 참조하십시오.

디스플레이 이미지

아래와 같은 이미지로 검색결과의 페이지네이션을 표시시킵니다.

구성 요소 구성 샘플

Component.js

import React from 'react';
import ReactPaginate from 'react-paginate';

const SearchApp = (props) =>
  (
    <div>
      <ReactPaginate
        pageCount={props.total_results / 20 | 0 + 1}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={props.handlePageClick}
        containerClassName='pagination'
        pageClassName='page-item'
        pageLinkClassName='page-link'
        activeClassName='active'
        previousLabel='previous'
        nextLabel='next'
        previousClassName='page-item'
        nextClassName='page-item'
        previousLinkClassName='page-link'
        nextLinkClassName='page-link'
        disabledClassName='disabled'
        breakLabel='...'
        breakClassName='page-item'
        breakLinkClassName='page-link'
      />
   </div>
)

설정 세부정보

항목 　　　
설정 내용
보충


pageCount
총 페이지 수
샘플에서는 1페이지 20건 표시하고 싶으므로, 20으로 나누어 소수점 이하를 잘라 1을 더하고 있습니다.　　

marginPagesDisplayed
종단에 표시하는 건수 　　　　　
　　　　　　　　　

pageRangeDisplayed
선택 위치의 전후로 표시하는 건수 　 　 　 　
　　

onPageChange
페이지 클릭시에 핸들하는 메소드
이런 식으로 페이지 수를 받습니다. index는 0부터 시작하기 때문에 1 더합니다. export const handlePageClick = (page) => { 'return { 'type: 'PAGE_CLICK' 'select_page: page.selected + 1}};

containerClassName
페이지의 ul 태그로 설정하는 클래스
Bootstrap4와 pagination

pageClassName
페이지의 li 태그에 설정하는 클래스
Bootstrap4이라면 page-item

pageLinkClassName
page의 a 태그로 설정하는 class
Bootstrap4라고 page-link

activeClassName
현재 활성 페이지로 설정하는 클래스
Bootstrap4와 active

previousLabel
previous로 설정할 레이블 이름
선택

nextLabel
next로 설정할 레이블 이름
선택

previousClassName
previous의 li 태그로 설정하는 class
Bootstrap4이라면 page-item

nextLinkClassName
next의 li 태그로 설정하는 class
Bootstrap4이라면 page-item

previousLinkClassName
previous의 a 태그로 설정하는 class
Bootstrap4라고 page-link

nextLinkClassName
다음의 a 태그로 설정하는 클래스
Bootstrap4라고 page-link

disabledClassName
previous·next를 누르지 못한 상태의 표시
Bootstrap4와 disabled

breakLabel
페이지 생략
선택

breakClassName
page의 생략 표시의 ul 태그에 설정하는 class
Bootstrap4와 pagination

breakLinkClassName
page의 생략 표시의 li 태그에 설정하는 class
Bootstrap4이라면 page-item