React로 페이지네이션 라이브러리로 구현하기

기멜·2021년 12월 18일
1

React

목록 보기
19/24

React로 페이지네이션을 라이브러리로 구현해보았습니다.
많이 해매가지고 제가 어떻게 구현을 했는지 차근차근 써보겠습니다.

구현한 화면

1차 프로젝트때는 무한스크롤을 구현하였고 2차 프로젝트에서는 페이지네이션을 구현하게 되었습니다. 좋은 라이브러리가 많이 있었는데 그 중에서 react-js-pagination을 적용해 보았습니다. 여러 패키지를 찾아보면서 제일 사용하기 쉬운 것을 이용하였습니다.

설치 및 사용법

npm
npm i react-js-pagination

이렇게 치면 쉽게 라이브러리 설치가 완료됩니다.

사용법

import React, { useState } from 'react';
import './Pagination.css';
import Pagination from 'react-js-pagination';
const Paging = () => {
  const [page, setPage] = useState(1);
  const handlePageChange = page => {
    setPage(page);
  };

  return (
    <Pagination
      activePage={page}
      itemsCountPerPage={10}
      totalItemsCount={50}
      pageRangeDisplayed={5}
      prevPageText=""
      nextPageText=""
      onChange={handlePageChange}
    />
  );
};
export default Paging;
  • activePage: 현재 페이지
  • itemsCountPerPage: 한 페이지당 보여줄 리스트 아이템의 개수
  • totalItemsCount: 총 아이템의 개수
  • pageRangeDisplayed: Paginator 내에서 보여줄 페이지의 범위
  • prevPageText: "이전"을 나타낼 텍스트 (prev, <, ...)
  • nextPageText: "다음"을 나타낼 텍스트 (next, >, ...)
  • onChange: 페이지가 바뀔 때 핸들링해줄 함수

CSS를 styled-components로 바꾸고 싶었는데 아무리 찾아봐도 방법을 찾지 못했습니다.
혹시 아시는 분이 있으면 댓글 남겨주시면 감사드리겠습니다!

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글