---
type: snippet
tags: ['pagination']
status: release
ctime: 2022-11-07
mtime: 2024-03-22
---

```ts
interface PaginationProps {
  /** 현재 페이지 번호 */
  currentPage: number;
  /** 전체 페이지 수 */
  totalPages: number;
  /** 페이지 변경 시 호출되는 콜백 함수 */
  onPageChange: (pageNumber: number) => void;
  /** 이전/다음 페이지 링크 표시 여부 (선택적) */
  showPreviousNext?: boolean;
  /** 페이지 번호 링크 표시 여부 (선택적) */
  showPageNumbers?: boolean;
  /** 페이지당 항목 수 (선택적) */
  pageSize?: number;
}
```

- [cbcruk/react-flat-pagination](https://github.com/cbcruk/react-flat-pagination)
- [mayankshubham/react-pagination](https://github.com/mayankshubham/react-pagination)
- [react-component/pagination](https://github.com/react-component/pagination)
- [wwwaiser/react-js-pagination](https://github.com/wwwaiser/react-js-pagination)
- [material-ui/react-pagination/](https://mui.com/material-ui/react-pagination/)
- [Pagination - NuxtLabs UI](https://ui.nuxtlabs.com/navigation/pagination)
- [AdeleD/react-paginate](https://github.com/AdeleD/react-paginate)
  - [How to Implement Pagination in React](https://hygraph.com/blog/react-pagination)

---

> 하지만 너무 많은 기능이 필요없기 때문에 최대한 단순한 컴포넌트를 만들었다.