MUI 페이지네이션 적용 방법

Jin·2022년 3월 17일
1

구글에서 지원하는 material ui (이하 mui)에는 다양한 UI 라이브러리들이 존재합니다. 저의 경우에는 Modal, Dialog, Pagination, Skeleton 등을 주로 잘 사용하고 있습니다.
그 중에서 Pagination에 대해 말하고자 합니다.

페이지네이션은 보통 위와 같은 형태로 데이터를 한꺼번에 불러오지 않고 일부분만 가져올 때에 사용됩니다. 이를 위해선 API를 호출할 때 몇 개씩 불러올 지가 파라미터로 설정되어 있어야 합니다.

MUI의 Pagination 웹페이지로 가보면 다양한 prop을 줄 수 있는데 주로 사용되는 몇 가지를 소개하겠습니다.

  • page: 현재 페이지
  • count: 총 페이지 개수
  • onChange: 페이지네이션에서 왼쪽, 오른쪽 화살표나 다른 페이지를 눌렀을 때 발생하는 함수
  • sx: 스타일을 정의
  • size: 전체적인 크기를 설정
  • renderItem: 페이지네이션 안을 직접 설정하고자 할 때 사용
import { Pagination, PaginationItem } from "@mui/material";

...

const [currentPage, setCurrentPage] = useState(1);
const onPageChange = (e: React.ChangeEvent<unknown>, page: number) => {
    setCurrentPage(page);
  };

...

<Pagination
  count={Math.ceil(data.total / COUNT_PER_PAGE)}
  page={currentPage}
  onChange={onPageChange}
  size="medium"
  sx={{
    display: "flex",
    justifyContent: "center",
    padding: "15px 0",
  }}
  renderItem={(item) => (
    <PaginationItem {...item} sx={{ fontSize: 12 }} />
  )}
/>

...

이런 식으로 사용할 수 있습니다.
onChange에서 상태로 선언한 currentPage를 변경하게 합니다.
만약, Pagination 안의 Item을 직접 커스터마이징하고 싶으면 renderItem prop에서 위와 같이 설정하면 됩니다.

느낀 점

material ui를 사용하면 간편하게 기본 형태의 UI 라이브러리를 가져다 쓸 수 있어서 편리합니다.

하지만, 간단한 디자인 변경 정도만 아니고 커스터마이징해야 할 사항이 많다면 material ui를 추천하지 않습니다.

깊게 커스터마이징할 수 있는 라이브러리가 아니고 다양한 UI를 빠르게 가져다 쓰는 것에 초점이 맞춰진 라이브러리라고 생각합니다.

mui에서 제공하는 기본 형태를 거의 바꾸지 않으면서 가져다 쓰는 것이 초점인지, 커스터마이징하는 것이 초점인지 잘 판단하여 쓰신다면 정말 유용한 라이브러리라고 생각합니다.

profile
배워서 공유하기

0개의 댓글