Pagination
여러 페이지로 나뉜 목록을 오가는 번호식 페이지 내비게이터예요.
핵심 속성
표시할 페이지 번호를 직접 나열하지 않아요. currentPage와 totalPages만 넘기면 어떤 번호를 보여줄지 컴포넌트가 계산해요. hrefFor는 페이지 번호를 URL로 바꾸기 때문에 모든 칸이 실제 링크가 되고 JavaScript 없이도 동작해요. renderLink는 컴포넌트를 라우팅 상태에 묶지 않고 라우터 요소를 끼워 넣어요.
| 속성 | 설명 |
|---|---|
| 현재 페이지 | 링크가 아닌 텍스트로 렌더링되며 aria-current="page"를 가져요 |
| 표시 범위 | boundaryCount만큼 양 끝에 페이지를 고정하고 siblingCount만큼 현재 페이지 양옆에 배치해요 |
| 생략 | 두 페이지 이상 비면 보조 기술에서 숨긴 말줄임표로 접고, 정확히 한 페이지만 비면 그 페이지를 그대로 보여줘요 |
| 이전/다음 | rel="prev"와 rel="next"를 가지며 첫 페이지와 마지막 페이지에서는 조작할 수 없어요 |
| 빈 상태 | 페이지가 하나뿐이면 아무것도 렌더링하지 않아요 |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/pagination.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRPagination } from '@tinyrack/ui/components/pagination';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
목록이 길어서 넓은 범위를 한눈에 보여주는 편이 나을 때 boundaryCount와 siblingCount를 올리세요. 둘 다 기본값은 1이에요.
API
currentPage와 totalPages는 필수이고 전체 순서를 결정해요. 범위를 벗어난 currentPage는 범위 안으로 맞춰져요. hrefFor(page)도 필수이며 각 페이지의 URL을 돌려주기 때문에, 1페이지를 /blog/page/1/이 아니라 /blog/ 같은 경로로 보낼 수 있어요.
boundaryCount는 양 끝에 고정할 페이지 수를, siblingCount는 현재 페이지 양옆에 둘 페이지 수를 정해요. boundaryCount를 0으로 두면 양 끝 고정을 없앨 수 있어요.
label은 landmark의 이름이고 기본값은 Pagination이에요. previousLabel과 nextLabel의 기본값은 각각 Previous, Next예요. pageLabel(page)은 각 페이지 링크의 접근 가능한 이름을 만들며 기본값은 Page {n}이고, 이전/다음 링크는 여기에 방향 라벨을 덧붙여요. 이 네 가지를 지정해 컴포넌트를 현지화하세요.
renderLink(page, state)는 대상 페이지와 current를 담은 상태 객체를 받아요. 이전/다음 링크에서는 direction도 함께 들어와요. anchor를 중첩하지 않고 React Router 같은 클라이언트 라우터를 연결할 때 사용하세요. 비활성화된 이전/다음 링크에서는 호출되지 않아요.
마크업 없이 표시할 번호 순서만 필요하다면 같은 서브패스에서 getPaginationRange를 가져다 쓸 수 있어요.
루트는 네이티브 nav 속성, className, style, 이벤트와 React 19 ref를 보존해요. 스타일은 Tinyrack semantic color, spacing, typography token을 사용하고 인스턴스별 재정의를 위해 --tr-pagination-radius, --tr-pagination-gap, --tr-pagination-border-color, --tr-pagination-current-background, --tr-pagination-current-text를 열어 둬요.