react-js-pagination 라이브러리

설치하기

npm install react-js-pagination
yarn add react-js-pagination

 

라이브러리 기본 설정

<Pagination
    //현재 보고있는 페이지 
    activePage={1}
    //한페이지에 출력할 아이템수
    itemsCountPerPage={5}
    //총 아이템수
    totalItemsCount={300}
    //표시할 페이지수
    pageRangeDisplayed={5}
    //함수
    onChange={handlePageChange}>
</Pagination>

 

+) 스타일링 적용

import Pagination from 'react-js-pagination'
import styled from 'styled-components'

const AxiosPost = () => {
  
  const handlePageChange = (page) => { setPage(page); };

  return (
    <div>
      <h2>API 연습</h2>
      <PaginationBox>
        <Pagination
          activePage={1}
          itemsCountPerPage={9}
          totalItemsCount={300}
          pageRangeDisplayed={5}
          onChange={handlePageChange}>
        </Pagination>
      </PaginationBox>
    </div>
  )
}

const PaginationBox = styled.div`
  .pagination { display: flex; justify-content: center; margin-top: 15px;}
  ul { list-style: none; padding: 0; }
  ul.pagination li {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem; 
  }
  ul.pagination li:first-child{ border-radius: 5px 0 0 5px; }
  ul.pagination li:last-child{ border-radius: 0 5px 5px 0; }
  ul.pagination li a { text-decoration: none; color: #337ab7; font-size: 1rem; }
  ul.pagination li.active a { color: white; }
  ul.pagination li.active { background-color: #337ab7; }
  ul.pagination li a:hover,
  ul.pagination li a.active { color: blue; }
`

export default AxiosPost

 

완성본