페이지네이션

페이지네이션 (Pagination)

페이지 이동을 위한 컴포넌트로, 이전/다음 링크와 함께 여러 페이지 중 현재 위치를 보여줘요. 목록이나 테이블처럼 콘텐츠가 여러 페이지에 걸쳐 나뉠 때, 사용자가 페이지를 오가며 탐색할 수 있게 해 주는 컴포넌트예요.

출처: 문서

본문

설치하기

CLI Manual 
npx shadcn@latest add pagination

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

컴포넌트를 import 하고,

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

다음 구조로 조립하면 돼요. 각 페이지 번호는 PaginationItem 안에 PaginationLink로 넣고, 숫자가 많아 중간을 생략하고 싶을 때는 PaginationEllipsis를 사용해요.

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Next.js

기본적으로 <PaginationLink /> 컴포넌트는 <a /> 태그를 렌더링해요.

Next.js의 <Link /> 컴포넌트를 사용하려면 pagination.tsx를 다음과 같이 수정해 주세요.

+ import Link from "next/link"

- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>

const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)

참고: CLI가 이 작업을 자동으로 해 주도록 업데이트하고 있어요.

더 알아보기 (Learn more)