페이지네이션

페이지로 나뉜 목록에서 이전·다음 묶음으로 이동하는 내비게이션이다. Polaris처럼 숫자 페이지를 길게 나열하지 않고, 현재 위치를 label 로 설명하고 양쪽 이동만 제공한다. 목록·표 하단에 두며, 첫 페이지와 마지막 페이지에서는 해당 방향 버튼을 비활성화한다.

상태

first

middle

last

활용 방법

테이블 하단

표나 리스트의 하단 중앙에 배치하고, label 에 현재 범위와 전체 개수를 표시한다.

Preview

이름상태

Acme활성

Nova활성

Luna활성

tsx

<Pagination hasPrevious hasNext label="26-50 / 248" />

링크 이동

서버 페이지네이션에서는 previousHref 와 nextHref 로 링크를 전달한다.

Preview

tsx

<Pagination
  hasPrevious
  hasNext
  previousHref="?page=2"
  nextHref="?page=4"
  label="3 / 10"
/>

콜백 이동

클라이언트 상태로 페이지를 바꾸는 화면에서는 onPrevious 와 onNext 를 전달한다.

Preview

tsx

<Pagination
  hasPrevious={page > 1}
  hasNext={page < pageCount}
  onPrevious={() => setPage((p) => p - 1)}
  onNext={() => setPage((p) => p + 1)}
  label={page + " / " + pageCount}
/>

사용 지침

· 25개를 넘는 긴 목록이나 테이블 하단에 둔다.
· 무한 스크롤보다 정확한 위치 이동과 총량 인지가 중요할 때 쓴다.
· 숫자 페이지를 많이 나열하지 않는다. 현재 위치는 label 로 설명한다.
· DataGrid 자체에는 내장하지 않고, 목록 화면이 하단에 조합한다.

속성

이름	타입	기본값	설명
hasPrevious	boolean	false	이전 버튼 활성화 여부
hasNext	boolean	false	다음 버튼 활성화 여부
previousHref	string	-	이전 페이지 링크
nextHref	string	-	다음 페이지 링크
onPrevious	() => void	-	이전 버튼 클릭 콜백
onNext	() => void	-	다음 버튼 클릭 콜백
label	ReactNode	-	가운데 상태 라벨
previousLabel	string	"이전 페이지"	이전 버튼 aria-label
nextLabel	string	"다음 페이지"	다음 버튼 aria-label
accessibilityLabel	string	"페이지네이션"	nav aria-label
className	string	-	배치·여백 조절