현 사항
전에 팀원분이 페이지네이션 hook을 구현해 놓으셨는데, setState와 useEffect를 이용해서 구현을 해놓으셨다. 굳이 2가지의 요소를 사용하지 않아도 react-query의 useInfinteQuery를 이용해서 페이지네이션을 구현할 수 있다고 생각이 들어서, 다시 재제작을 해보았다.
구현 코드
처음에는 조건문을 사용하지 않고, 아래처럼 구현을 했었는데 처음에는 0을 불러왔는데, 버튼을 클릭하니 페이지 2를 불러오는 문제점이 발생했다.
lastPage.last?undefined:allPages.length + 1
그래서 api 조건을 살펴보았는데, 우리쪽 백에서 page=0부터 시작하게 설정을 해놓아서, 아래처럼 조건문을 설정해놓았다!
const useFeedInfiniteQuery = () => {
return useInfiniteQuery({
queryKey: [FEED_API_KEY.FEEDS],
queryFn: async ({ pageParam = 0 }) => await getFeeds({ page: pageParam }),
getNextPageParam: (lastPage, allPages) => {
const calculateNextPageParam = () => {
if (lastPage.last) return undefined;
else {
if (allPages.length === 1) {
return allPages.length;
} else {
return allPages.length + 1;
}
}
};
const nextPageParam = calculateNextPageParam();
return nextPageParam;
},
});
};
export default useFeedInfiniteQuery;
'트러블 슈팅 > React' 카테고리의 다른 글
[React] 중복 클릭 방지 구현하기 (1) | 2024.01.02 |
---|---|
[React] useInfiniteQuery로 페이지네이션 적용하고 난 후 데이터 깜빡임 현상 (1) | 2023.12.08 |
[React] useInfiniteQuery page별로 받아오는 데이터 병합하기 (0) | 2023.12.06 |
[React] useCallback을 왜 제거할까? (0) | 2023.11.29 |
[react-query] 실행 시점 enabled, refetch를 이용하고, cache된 데이터 삭제 (1) | 2023.11.24 |