Ant.design Pagination v4

Ant Design 에서는 테이블 구현 시, 자동으로 페이지네이션이 true 로 구현된다.

import { Table } from 'antd';
...
return <Table columns={columns} dataSource={dataSource} />;

//위처럼 다른 data 없이 기본형만 구현하더라도, pagination 이 구현된다. 

<Table /> props 로 pagination 을 넣어줘도 큰 어려움 없이 조작 가능하지만 조금 더 분리해서 작업하기 위해서는 Pagination 을 따로 가져와서 구현하는게 좋다.

import { Pagination } from 'antd';
...
return (
<>
    <Table columns={columns} dataSource={dataSource} />
    <Pagination defaultCurrent={1} total={50} />
</>
)

이렇게만 작업하면 pagination 이 2개가 구현된다.

<Pagination /> 컴포넌트를 따로 구현할 때는 , <Table /> 의 Property 로 pagination={false} 를 꼭 넣어줘야 한다.

import { Pagination } from 'antd';
...
return (
<>
    <Pagination hideOnSinglePage current={currentPage} total={pageInfo.totalCount} onChange={onPageChange} />
</>
)
// defaultPageSize={15} 넣어주면 15개씩 보임.

위처럼, <Pagination /> 의 Property 로 total 과 currnt 만 지정하고 다른 설정을 하지 않으면 기본적으로 한 페이지당 10개만 목록을 보여준다.

그래서 10개가 아닌 다른 갯수로 목록을 보여주고 싶다면, defaultPageSize Property 를 넣어줘야 한다.