Suspense를 사용하여 무한 스크롤 컴포넌트의 로딩 상태를 관리하는 방법은?

07 Nov 2023

suspense

첫 번째로, React의 Suspense 컴포넌트를 사용하여 로딩 상태를 관리합니다. Suspense는 JavaScript의 예외 처리와 유사한 방식으로 동작하여 여러 개의 비동기 컴포넌트를 로딩하는 동안 로딩 상태를 관리할 수 있습니다.

import React, { Suspense } from 'react';

function InfiniteScroll() {
  return (
    <Suspense fallback={<Loader />}>
      // 비동기 컴포넌트를 로드하는 코드
    </Suspense>
  );
}

두 번째로, 비동기 데이터를 가져오는 컴포넌트를 만듭니다. 이 컴포넌트는 사용자가 스크롤을 내릴 때마다 추가 데이터를 가져오는 역할을 합니다.

import React, { useEffect, useState } from 'react';

function InfiniteScrollComponent() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const fetchData = async () => {
    setIsLoading(true);
    // 비동기 데이터를 가져오는 코드
    setIsLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {data.map((item) => (
        // 데이터를 렌더링하는 코드
      ))}
      {isLoading && <Loader />} // 로딩 중일 때 로더를 표시
    </div>
  );
}

세 번째로, 스크롤 이벤트를 감지하여 추가 데이터를 가져옵니다. 스크롤 이벤트가 발생할 때마다 fetchData 함수를 호출하여 새로운 데이터를 가져옵니다.

import React, { useEffect, useState } from 'react';

function InfiniteScrollComponent() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [page, setPage] = useState(1);

  const fetchData = async () => {
    setIsLoading(true);
    // 비동기 데이터를 가져오는 코드
    setIsLoading(false);
  };

  const handleScroll = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight) {
      setPage((prevPage) => prevPage + 1);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    fetchData();
  }, [page]);

  return (
    <div>
      {data.map((item) => (
        // 데이터를 렌더링하는 코드
      ))}
      {isLoading && <Loader />} // 로딩 중일 때 로더를 표시
    </div>
  );
}

위의 방법을 사용하면 Suspense를 활용하여 무한 스크롤 컴포넌트의 로딩 상태를 관리할 수 있습니다. Suspense를 사용하면 비동기 컴포넌트의 로딩 상태를 간편하게 처리할 수 있으며, 스크롤 이벤트를 감지하여 데이터를 동적으로 가져올 수 있습니다.