react에서 사용하는 antd 컴포넌트 중 Table을 사용하는 경우 나타나는 페이지네이션을 숨기거나 삭제하는 방법에 대하여 알이봅니다.


! antd의 Table 컴포넌트 페이지네이션 삭제
antd의 Table 컴포넌트는 기본값으로 페이지네이션을 자동으로 화면에 출력합니다. 불러오는 리스트의 개수가 많은 경우 첫 페이지가 아닌 다른 페이지에 나타나게 되죠.

물론 편리한 기능이지만 만약 페이지네이션이 필요없는 경우라면?? 1000개가 있는 경우 페이지네이션 없이 화면에 모두 출력하길 원하는 경우도 물론 있을 것입니다. 이 경우 어떻게 할 수 있을까요?


간단한 설정 방법으로 제거할 수 있다면 물론 편리하겠지만 찾아본 결과 간단한 설정만으로는 어렵습니다. 대신 Table 컴포넌트 요소에 pagination props 정보를 추가하면 가능합니다.
<Table
  ...
  pagination={{
    total: 1000,
    pageSize: 1000,
    hideOnSinglePage: true
  }}
/>

위 코드를 살펴보면 pagination에 객체를 추가한 부분이 아래와 같이 존재합니다.
{
  total: 1000,
  pageSize: 1000,
  hideOnSinglePage: true
}

위의 1000 값은 전체 개수와 페이지 사이즈 수를 의미하며 단순하게 화면에 출력할 가장 큰 값을 입력하면 됩니다.

위와 같이 큰 값을 주게되면? 페이지네이션으로 출력되지 않고 간단하게 모두 한 화면에 출력할 수 있게됩니다.


여기까지 antd의 Table 컴포넌트에서 paginantion을 제거, 삭제하는 방법을 알아보았습니다.