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