ReactJS에서 스크롤 다운 이벤트를 통해 데이터를 로드

ReactJS에서 스크롤 다운 이벤트를 통해 데이터를 로드하려면, 스크롤 이벤트를 감지하는 useEffect 함수를 사용하여 추가적인 데이터를 로드하는 API 호출을 수행하면 됩니다. 다음은 간단한 예제입니다:

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

const App = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (loading) return;

      if (
        window.innerHeight + document.documentElement.scrollTop
        === document.documentElement.offsetHeight
      ) {
        setLoading(true);
        loadData();
      }
    };

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

  const loadData = async () => {
    const response = await fetch(`https://my-api.com/data?page=${page}`);
    const newData = await response.json();

    setData([...data, ...newData]);
    setPage(page + 1);
    setLoading(false);
  };

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      {loading && <div>Loading...</div>}
    </div>
  );
};

export default App;

이 예제에서는 스크롤 이벤트를 감지하여 페이지 끝에 도달하면 더 많은 데이터를 로드합니다. 로딩 중에는 loading 상태를 true로 설정하여 더 많은 데이터를 로드하지 않도록 합니다.