💬 데이터베이스는 supabase, 서버 상태 관리로는 React Query를 사용하고 있는 환경에서 페이지네이션을 구현해보았다.
mui에서 제공하는 페이지네이션이 깔끔해서 사용해서 구현해보도록 했다.
mui pagination
기본적으로 mui 페이지네이션에 사용할 수 있는 프로퍼티
- page - 현재 페이지 값
- conunt - 모든 페이지 수
- shape - 모양 설정
- onChange - 페이지 선택 시 실행할 함수
구현에 필요한 프로퍼티를 페이지네이션 컴포넌트에 지정해줬다.
<Pagination
page={page}
count={Math.ceil(totalLength / 10)}
shape="rounded"
onChange={onClickPage}
/>먼저, 현재 페이지와 페이지에서 보여줄 리스트 수를 useState를 사용하여 지정해주고 페이지를 클릭 시 page에 현재 페이지를 저장해서 사용할 수 있도록 했다.
const [page, setPage] = useState(1)
const [pageSize, setPageSize] = useState(5)
const onClickPage = (e: React.ChangeEvent<unknown>, page: number) => {
setPage(page) // 현재 페이지 저장
}useQuery의 range()를 사용하여 페이지네이션을 구현해주기 위해 offset과 limit 값이 필요하기 때문에 page와 pageSize로 각각 들어갈 값을 계산해주었다.
const queryOption = {
limit: pageSize + (page - 1) * pageSize,
offset: (page - 1) * pageSize,
}리스트 데이터를 가져오는 함수인 getProjects를 호출할 때 limit가 초기값인 0이 아니라면 range(offset, limit) 가 적용된 값을 가져와서 페이지네이션 할 수 있도록 설정해줬다.
export async function getProjects({
limit = 0,
offset = 0,
}: Values) {
const query = supabaseForClient.from("projects").select("*")
limit !== 0 && query.range(offset, limit)
const { data, error } = await query
if (error) console.log("error", error)
return data
}이를 useQuery의 queryFn에 지정해주고, 의존성 키 값으로 page 값을 넣어주어 페이지가 변경될 때마다 refetch 될 수 있도록 설정했다.
const { data } = useQuery({
queryKey: ["projects", page],
queryFn: () => getProjects(queryOption),
})useQuery를 사용할 때 쿼리가 변수에 의존하는 경우 의존성 키 값을 반드시 지정해주어야 값이 변경될 때마다 refetch 되어 바로 반영되기 때문에 이를 적절하게 설정해주는 것이 아주 중요한 것 같다.
이번에는 css 라이브러리를 사용하여 페이지네이션을 구현해보았는데 다음에 만들 때는 라이브러리를 사용하지 않고 페이지네이션을 완전히 만들어보는 것도 좋을 것 같다.
