시도한 방법
•
useInfiniteQuery훅을 사용해서 무한 스크롤을 처음 구현하려고 하는데, 구글링 문서와 공식 문서를 참고해보니 모두 각자 코드가 너무 달라서 어떻게 시작해야 할지 막막했다.
•
사용에 익숙지 않아서 생긴 이슈
→ 프로젝트에 따라 다양한 상황에 다양한 방법으로 적용할 수 있기 때문에 각자 코드가 상이했을 것
해결책
1.
기존 quizzes 테이블에서 모든 데이터를 다 불러오던 getQuizzes API 함수를 활용 → .range() 를 통해 a번째부터 b번째까지 n개씩 가져오도록 수정
/** quizzes 테이블에서 페이지 나뉜 전체 데이터 가져오기 */
const PAGE_SIZE = 8;
export const getQuizzesPaged = async (pageParam: number, level: number | null) => {
try {
let query = supabase.from('quizzes').select('*').is('deleted_at', null).order('created_at', { ascending: false });
if (level !== null) {
query = query.eq('level', level);
}
const { data, error } = await query.range((pageParam - 1) * PAGE_SIZE, pageParam * PAGE_SIZE - 1);
... 이후 코드 생략
JavaScript
복사
2.
기존 useQuery 를 useInfiniteQuery 로 변경하고, data, isLoading, hasNextPage, fetchNextPage를 구조분해할당하여 필요한 곳에 활용
3.
스크롤 이벤트를 통해 isAtBottom 위치에 도달한 경우 fetchNextPage() 를 호출하여 다음 n개 데이터를 가져옴