페이지네이션 Pagination

페이지네이션은 많은 양의 콘텐츠를 탐색하기 쉽도록 여러 화면에 나누고, 분할된 화면을 탐색하는 데 사용되는 요소이다.

KRDS 가이드

기본

import { Pagination } from '@krds.ui/react'

export default function PaginationDemo() {
  return <Pagination totalPages={10} defaultPage={1} />
}

Pagination

Props

이름	타입	기본값	설명
totalPages (필수)	number	-	전체 페이지 수
currentPage	number	-	현재 페이지 (제어 상태)
defaultPage	number	1	초기 페이지 (비제어 상태)
onChange	((page: number) => void)	-	페이지 변경 핸들러
prevLabel	string	이전	이전 버튼 레이블
nextLabel	string	다음	다음 버튼 레이블
boundaryCount	0 | 1 | 2 | 3	1	경계 영역에 항상 표시할 페이지 수 (앞/뒤)
siblingCount	0 | 1 | 2 | 3	1	현재 페이지 주변에 표시할 형제 페이지 수
disabled	boolean	false	비활성 상태
className	string	-	커스텀 클래스명