가상화를 이용하여 대형 리스트 무한스크롤 최적화 해보기

const fetchIssueLists = async ({
  queryKey,
  pageParam = 1,
}: {
  queryKey: any[];
  pageParam?: number;
}) => {
  const [, category, sort] = queryKey;
  const { data } = await axios.get(
    `${baseURL}/content/news/${category}?page=${pageParam}&size=20&sort=${sort}`
  );
  return data;
};
 
export const getIssueLists = (category: string, sort: string) => {
  const queryKey = ['IssueLists', category, sort];
 
  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
    useInfiniteQuery({
      queryKey,
      queryFn: fetchIssueLists,
      getNextPageParam: (lastPage, allPages) => {
        if (lastPage.length === 0) {
          return undefined;
        }
        return allPages.length + 1;
      },
      initialPageParam: 1,
      enabled: !!category,
    });
 
  return {
    data,
    fetchNextPage,
    hasNextPage: !!data?.pages.length,
    isFetching,
    isFetchingNextPage,
    isLoading,
  };
};

const CategoryNews = () => {
  const [category, setCategory] = useState('building'); //신문기사 카테고리
  const [sort, setSort] = useState('latest'); //신문기사 정렬
  const ref = useRef<HTMLDivElement | null>(null); //isPageEnd Ref
  const pageRef = useIntersectionObserver(ref, {}); //isPageEnd Ref
  const isPageEnd = !!pageRef?.isIntersecting; //isPageEnd Ref
 
  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
    getIssueLists(category, sort); //무한스크롤 hook
 
  const fetchNext = useCallback(async () => {
    //다음 페이지 fetch 함수
    if (hasNextPage && !isFetching && !isFetchingNextPage && !isLoading) {
      await fetchNextPage();
    }
  }, [fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading]);
 
  useEffect(() => {
    //isPageEnd 감지
    let timerId: NodeJS.Timeout | undefined;
 
    if (isPageEnd && hasNextPage) {
      timerId = setTimeout(() => {
        fetchNext();
      }, 1000);
    }
 
    return () => clearTimeout(timerId);
  }, [fetchNext, isPageEnd, hasNextPage]);
 
  const allPosts = data?.pages?.flat() || []; //무한스크롤 데이터 펼치기
 
  return (
    <div className="mt-5">
      ...
      {isLoading
        ? Array.from({ length: 5 }).map((_, i) => <CategoryNewsItemSkeleton key={i} />)
        : allPosts.map((item: IssueListItem) => (
            <CategoryNewsItem key={item.id} {...item} /> //신문기사 item
          ))}
      {(isFetching || isFetchingNextPage || hasNextPage) && <LoaderSkeleton />}
      <div className="w-full touch-none" ref={ref} />
    </div>
  );
};
 
export default CategoryNews;

const CategoryNews = () => {
  const [category, setCategory] = useState('building');
  const [sort, setSort] = useState('latest');
 
  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
    getIssueLists(category, sort);
 
  const loadMore = useCallback(() => {
    if (hasNextPage && !isFetching && !isFetchingNextPage && !isLoading) {
      setTimeout(() => {
        fetchNextPage();
      }, 200);
    }
  }, [fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading]);
 
  const allPosts = data?.pages?.flat() || [];
 
  return (
    <div className="mt-5">
      ...
      {isLoading ? (
        Array.from({ length: 5 }).map((_, i) => <CategoryNewsItemSkeleton key={i} />)
      ) : (
        <Virtuoso
          style={{ height: 'calc(100vh - 50px)', margin: '0px' }}
          useWindowScroll
          totalCount={allPosts.length}
          data={allPosts}
          endReached={loadMore}
          itemContent={(index, item: IssueListItem) => <CategoryNewsItem key={item.id} {...item} />}
        />
      )}
    </div>
  );
};
 
export default CategoryNews;