인프런 커뮤니티 질문&답변

강의 수강중에, 배운 무한스크롤을 바탕으로 개인 프로젝트를 진행중입니다.
위의, 데이터를 받아오는 것을 보면, 처음에는 2개를 불러오고, 그 이후에는 계속 5개를 불러오는데, 제가 원하는 방식은 처음부터 끝까지 5개씩 계속 일정하게 불러오는 것을 원합니다. 이유를 찾을려고 여러가지 검색을 해보며 해봤는데도, 해결되지않아서 질문드립니다. 이 경우 의심해볼 수 있는 부분은 어떤 부분이 있을까요?

최상위 페이지에서 아래와 같이 prefetch를 해오고

type HomeProps = {
  params: {
    category: string;
  };
};

const CategoryDetailPage: React.FC<HomeProps> = async ({ params }) => {
  const { category } = params;

  const queryClient = new QueryClient();
  const college = category;

  // 서버에서 불러온 데이터를 클라이언트의 리액트 쿼리가 물려받음.(하이드레이트)
  await queryClient.prefetchInfiniteQuery({
    queryKey: ['posts', college],
    queryFn: ({ pageParam = 1 }) => getFilteredPosts(college, { pageParam }), // searchParams 전달
    // 커서 값
    initialPageParam: 0
  });

  // hydrate라는 것은 서버에서 온 데이터를 클라이언트에서 그대로, 물려받는 것 이다.
  const dehydratedState = dehydrate(queryClient);

  return (
    <HydrationBoundary state={dehydratedState}>
      <Container>
        <ListingContainerTest />
      </Container>
    </HydrationBoundary>
  );
};

export default CategoryDetailPage;

실제 무한스크롤을 사용하는 곳은 아래와 같이 사용하고 있습니다.

'use client';

import { getFilteredPosts } from '@/app/lib/getFilteredPosts';
import { useInfiniteQuery } from '@tanstack/react-query';
import { usePathname } from 'next/navigation';
import { Fragment, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import ClimbingBoxLoader from 'react-spinners/ClimbingBoxLoader';

import EmptyState from '../EmptyState';
import ListingGrid from './ListingGrid';

const ListingCard = () => {
  const path = usePathname();
  // ['', chss]
  const college = path.split('/')[1];

  const {
    data: listings,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isError
  } = useInfiniteQuery({
    queryKey: ['posts', college],
    queryFn: ({ pageParam = 1 }) => getFilteredPosts(college, { pageParam }),
    initialPageParam: 0,
    // 가장 최근에 불러왔던 게시글
    getNextPageParam: (lastPage) => lastPage.studyList.at(-1)?.id,
    staleTime: 60 * 1000,
    gcTime: 300 * 1000
  });
  // lastPage.jobList.at(-1)?.id,
  const { ref, inView } = useInView({
    // div가 보이고나서 몇픽셀 정도의 이벤트가 호출될 것 인가? 보이자마자 바로 호출.그래서0
    threshold: 0,
    // 몇초후에 딜레이 보일것인지.
    delay: 0
  });

  console.log(listings);

  useEffect(() => {
    if (inView) {
      !isFetching && hasNextPage && fetchNextPage();
    }
  }, [inView, isFetching, hasNextPage, fetchNextPage]);

  if (isError || listings?.pages?.length === 0) {
    return <EmptyState />;
  }

  return (
    <>
      <div className="pt-24 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8">
        {listings?.pages.map((page) =>
          // Assuming each page has a 'studyList' property
          page.studyList.map((listing: any) => (
            <Fragment key={listing.id}>
              <ListingGrid data={listing} />
            </Fragment>
          ))
        )}
        <div ref={ref} style={{ height: 50 }}></div>
      </div>

      {isFetching && (
        <div className="flex items-center justify-center">
          <ClimbingBoxLoader color="#36d7b7" size={20} />
        </div>
      )}
    </>
  );
};
export default ListingCard;