구글에서 지원하는 material ui (이하 mui)에는 다양한 UI 라이브러리들이 존재합니다. 저의 경우에는 Modal, Dialog, Pagination, Skeleton 등을 주로 잘 사용하고 있습니다.
그 중에서 Pagination에 대해 말하고자 합니다.
페이지네이션은 보통 위와 같은 형태로 데이터를 한꺼번에 불러오지 않고 일부분만 가져올 때에 사용됩니다. 이를 위해선 API를 호출할 때 몇 개씩 불러올 지가 파라미터로 설정되어 있어야 합니다.
MUI의 Pagination 웹페이지로 가보면 다양한 prop을 줄 수 있는데 주로 사용되는 몇 가지를 소개하겠습니다.
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를 추천하지 않습니다.
mui에서 제공하는 기본 형태를 거의 바꾸지 않으면서 가져다 쓰는 것이 초점인지, 커스터마이징하는 것이 초점인지 잘 판단하여 쓰신다면 정말 유용한 라이브러리라고 생각합니다.