[TIL] 04.23 react pagination

react pagination 라이브러리들을 살펴 보았다. 여러 라이브러리들 중 hook를 사용하는 라이브러리 두가지를 선택하였다. 

사용법은 다 비슷비슷 하였다. 컴포넌트에 props를 내려주어 내가 어떻게 페이지네이션 할지 선택하는 방식이였다. 

 

1. react-hook-paginator

https://www.npmjs.com/package/react-hooks-paginator  

 <Paginator
        totalRecords={data.length} // 전체 게시글 수 
        pageLimit={4}              // 페이지당 게시글 수
        pageNeighbours={1}         // 1..234...10 이렇게 있다면 3 양옆으로의 번호 개수
        setOffset={setOffset}      // offset 위치
        currentPage={currentPage}  // 현재 페이지 번호
        setCurrentPage={setCurrentPage} // 바뀌는 페이지 번호
/>

위에 나와 있는 API들 외에 더많은 API 가 있으니 위 링크로 들어가서 확인해보면 되겠다. 

여기서 아쉬운 점은 pafeNeighbours가 2가 최대값이고 pageLimit 도 20이 한계였다. 그래서 라이브러리 코드를 수정해줘야 할 필요가 있다. typescript가 아닌것도 아쉬웠다.  

 

2. react-pagination-hook

https://www.npmjs.com/package/react-hooks-paginator

{
  activePage: number; // 선택된 페이지
  isFirst: boolean;   // 첫 페이지
  isLast: boolean;    // 마지막 페이지
  hasPrevious: boolean;  // 이전 버튼 
  hasNext: boolean;      // 다음 버튼
  visiblePieces: PaginatorPiece[]; // 페이지당 게시글 수 
  goToPage: (pageNumber: number) => void; //페이지 이동
}

이 라이브러리는 자세히 살펴 보진 못했지만 타입스크립트로 지정 되어 있고 위에서 말한 아쉬운 부분을 모두 보완 해주고 있었다. 

내일은 이 라이브러리에 대해서 알아보고 적용을 해볼 생각이다.