Couch Coding ( 카우치 코딩 ) - AntDesign 이용하여 페이지네이션 구현하기

Ant Design은 알리바바 그룹에서 개발한 UI 프레임워크이다 .

Button, Slide, Input, Form 등 다양한 리액트 컴포넌트를  제공한다

 

Ant Design을 이용하여 손쉽게 슬라이드와 페이지네이션을 구현하는 방법을 알아보자 !

 

 📄 Pagination

페이지네이션을 구현하는 방법을 알아보자

 

 

 

위 페이지네이션 Example을 사용해보자! 

 

// Pagination

import { Pagination } from 'antd';

const [currentPage, setCurrentPage] = useState(); // 현재 페이지 State

// Ant Design의 Pagination 컴포넌트
<Pagination
  current={currentPage}  // 현재 클릭한 페이지
  total={totalElement}   // 데이터의 총 개수
  pageSize={5}           // 페이지 당 보여줄 개수
  onChange={(value) => {   
  changePage(value);     // 페이지의 변경 이벤트가 발생하면 changePage 함수를 호출
  }}
/>

// 페이지 변경
const changePage = (page) => {
  setCurrentPage(page); // onChange 함수에서 보낸 value 파라미터
  getData(page);  // 변경된 page를 파라미터로 데이터를 요청
};

 

Pagination 컴포넌트에 필요한 API들을 등록하자 

페이지를 클릭했을 때 수행되는 onChange 이벤트를 사용하여 데이터를 서버에 요청하면 되겠다 !

 

 

이렇게 사용하게 된다면 페이지네이션의 구현이 완료가 된 것이다. 

너무 쉽다 ! 

 

➕ Styled-Components 로 Ant Design 커스텀 디자인 하는 방법 

 

위의 코드에서 변경이 약간 필요하다 

 

<PaginationContent
  current={currentPage + 1}
  total={totalElement}
  pageSize={5}
  onChange={(value) => {
  changePage(value);
 }}
/>

 

컴포넌트 이름을 Styled-Components 에서 사용 할 수 있게 기존의 Pagination에서 변경해준다

 

 

Styled-Components 코드에 아래 처럼 선언해준다 예) styled(Ant Design 컴포넌트)

 

const PaginationContent = styled(Pagination)`
  .ant-select-selector {
    display: none;
  }
`;

 

이렇게 해주면 Ant Design 컴포넌트를 커스텀 할 수 있다. 

.ant-select-selector와 처럼 클래스명을 통해 디자인을 변경한 이유는 Pagination 컴포넌트를 렌더링 했을 경우에 

개발자 도구 Element 탭에서 확인해보면 Pagination 하위에 많은 태그들이 존재 하는데 그 태그들의 디자인을 변경하기 위해서는 

각 태그의 클래스명을 통해서 하면 된다 !

 

 

💡 써보고 느낀 앤트디자인의 장단점

장점

굉장히 편안한 디자인 레이아웃

보통 React로 프로젝트를 진행한다면 마크업을 하고 Styled-Components 등을 사용하여 디자인을 하고.. 

하나의 컴포넌트 디자인을 위해 해야할 일이 상당히 많다. 하지만 앤트디자인을 사용하면 디자인 된 컴포넌트를 제공해주기 때문에

편하게 사용 할 수 있고, 각 컴포넌트마다 사용 할 수 있는 API, Methods가 존재하기 때문에 편하게 이벤트를 등록하거나 그리드 변경이 가능하다 

 

단점

커스텀 디자인

컴포넌트를 그대로 가져와 사용하기 때문에 컴포넌트를 브라우저에서 Element 탭에서 확인해보면 여러 태그들이 존재해있다. 

이 태그들의 디자인을 변경하는 것이 정말 쉽지않다.. 일일이 개발자 도구를 열어서 찾아 보며 디자인 변경을 해야하기 때문에 

디자인을 커스텀하기 굉장히 애를 먹었던 것 같다.

 

 

---

 

앤트디자인의 단점은 위에 적어놓은 것 말고도 많이 존재하지만 장점이 매우 좋게 다가왔기 때문에 아주 만족하면서 사용했다.

나중에 혼자 프로젝트를 진행 할 때도 사용하면 좋을 것 같다고 생각했다. 

 

 

 

- Reperence

 

https://ant.design/components/pagination/

Pagination - Ant Design