본문으로 건너뛰기

Pagination

Pagination 컴포넌트는 많은 데이터를 여러 페이지로 나누어 보여줄 때 사용합니다. 사용자는 페이지 번호를 클릭하여 원하는 페이지로 이동할 수 있으며, 처음/마지막 페이지로 이동하거나 이전/다음 페이지로 이동할 수 있습니다. 리스트, 테이블, 검색 결과 등에서 자주 활용됩니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 Pagination 컴포넌트의 모습을 확인해보세요.

1 / 20

currentPagenumber
현재 페이지 번호를 설정합니다.
totalCountnumber
전체 페이지 수를 설정합니다.
itemCountPerPagenumber
페이지당 아이템 수를 설정합니다.
pageCountnumber
페이지 수를 설정합니다.
breakPointselect
페이지네이션 크기를 선택합니다.

기본 사용법​

import { Pagination } from '@ncds/ui-admin';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const handlePageChange = (pageNum) => {
    // pageChange logic
    setCurrentPage(pageNum);
  };
  return <Pagination totalCount={100} currentPage={currentPage} onPageChange={handlePageChange} />;
}

1 / 20

1 / 20

Props​

PropTypeDefaultDescription
totalCountnumber-전체 아이템 개수입니다.
currentPagenumber-현재 페이지 번호입니다.
itemCountPerPagenumber10한 페이지에 보여줄 아이템 개수입니다.
pageCountnumber10한 번에 보여줄 페이지 번호의 개수입니다.
onPageChange(page: number) => void-페이지가 변경될 때 호출되는 콜백 함수입니다.(react)
classNamestring-커스텀 스타일을 위한 className입니다.
as'button' | 'a''button'페이지네이션 버튼의 HTML 요소를 지정합니다.
hrefstring-as="a"일 때 사용할 링크 주소입니다.
breakpoint'pc' | 'mo''pc'모바일, pc UI를 선택할 수 있습니다.

상세 예제​

전체 아이템 개수에 따른 페이지네이션​

전체 아이템 개수(totalCount)에 따라 페이지네이션의 모습이 달라집니다. itemCountPerPage 값이 10일 때, 아래와 같이 표시됩니다.

100개 아이템 (10페이지)

1 / 10


200개 아이템 (20페이지)

1 / 20

100개 아이템 (10페이지)

1 / 10


200개 아이템 (20페이지)

1 / 20

현재 페이지 표시​

현재 페이지(currentPage)에 따라 활성화된 페이지 번호가 강조됩니다. 또한 현재 페이지가 변경되면 페이지 그룹이 자동으로 업데이트됩니다.

현재 페이지: 1

1 / 10


현재 페이지: 10

10 / 11

현재 페이지: 1

1 / 10


현재 페이지: 10

10 / 11

페이지 그룹 크기 조절​

pageCount prop을 통해 한 번에 표시되는 페이지 번호의 개수를 조절할 수 있습니다. 기본값은 10입니다.

페이지 그룹 크기: 5

1 / 10


페이지 그룹 크기: 10 (기본값)

1 / 10

페이지 그룹 크기: 5

1 / 10


페이지 그룹 크기: 10 (기본값)

1 / 10

링크 형태로 사용하기​

as prop을 통해 페이지네이션의 버튼을 링크(<a> 태그)로 변경할 수 있습니다. href prop과 함께 사용하면 각 페이지에 대한 URL을 지정할 수 있습니다.

링크 형태 (as="a")

1 / 10


기본 버튼 형태 (as="button")

1 / 10

링크 형태 (as="a")

1 / 10


기본 버튼 형태 (as="button")

1 / 10

반응형 디자인 조절​

breakPoint prop을 통해 컴포넌트의 UI를 변경할 수 있습니다. 'pc' 또는 'mo' 값을 사용할 수 있으며, 기본값은 'pc'입니다. 각 값에 따라 컴포넌트의 레이아웃과 스타일이 달라집니다.

PC UI (breakPoint="pc", 기본값)

1 / 20


MO UI (breakPoint="mo")

1 / 20

PC UI (breakPoint="pc", 기본값)

1 / 20


MO UI (breakPoint="mo")

1 / 20

주의사항​

  1. totalCount가 0이거나 1페이지 이하일 경우, 페이지네이션이 표시되지 않을 수 있습니다.
  2. onPageChange 콜백에서 페이지 상태를 반드시 업데이트해야 정상 동작합니다.
  3. 페이지 번호는 1부터 시작합니다.
  4. 반응형 디자인이 적용되어 있어 모바일 환경에서는 화살표 아이콘이 자동으로 변경됩니다.
  5. 커스텀 스타일을 적용할 때는 className prop을 활용하세요.
  6. totalPage (totalCount / itemCountPerPage)가 pageCount보다 클 경우에만 페이지 점프 버튼이 노출 됩니다.