Custom Hook을 활용한 무한 스크롤 구현하기

06 Nov 2023

customhook

개요

무한 스크롤은 웹 애플리케이션에서 많은 양의 데이터를 효율적으로 표시하기 위한 기술입니다. 사용자가 스크롤을 내릴 때마다 새로운 데이터를 동적으로 로드하여 화면에 표시합니다. 이를 통해 사용자는 한 번에 많은 양의 데이터를 로드하지 않고도 필요한 만큼씩 데이터를 확인할 수 있습니다.

이번 튜토리얼에서는 React 라이브러리를 사용하여 Custom Hook을 작성하여 무한 스크롤을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook 작성하기

import { useState, useEffect } from 'react';

const useInfiniteScroll = (callback) => {
  const [isFetching, setIsFetching] = useState(false);

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

  useEffect(() => {
    if (!isFetching) return;
    callback();
  }, [isFetching]);

  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      setIsFetching(true);
    }
  };

  return [isFetching, setIsFetching];
};

export default useInfiniteScroll;

Custom Hook인 useInfiniteScroll을 작성했습니다. 이 Hook은 스크롤 이벤트를 감지하고, 스크롤이 페이지 하단에 도달하면 콜백 함수를 호출하여 새로운 데이터를 로드할 수 있습니다.

컴포넌트에서 Custom Hook 사용하기

import React, { useState, useEffect } from 'react';
import useInfiniteScroll from './useInfiniteScroll';

const InfiniteScrollComponent = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

  const fetchData = () => {
    // 데이터 요청 로직 작성
    // 예시로는 API에서 새로운 데이터를 가져오는 비동기 함수를 사용

    // 데이터를 가져온 후에는 가져온 데이터를 기존 데이터에 추가하고 페이지 수를 증가시킴
    // 이후에 스크롤 이벤트를 다시 감지하기 위해 setIsFetching을 false로 설정
  };

  const [isFetching, setIsFetching] = useInfiniteScroll(fetchData);

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

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      {isFetching && <div>Loading...</div>}
    </div>
  );
};

export default InfiniteScrollComponent;

위의 예시에서는 InfiniteScrollComponent라는 컴포넌트에서 Custom Hook을 사용하여 무한 스크롤을 구현했습니다. 데이터를 가져오는 fetchData 함수를 콜백으로 전달하고, isFetching 값을 통해 로딩 상태를 표시합니다. 데이터를 가져온 후에는 가져온 데이터를 기존 데이터에 추가하고 페이지 수를 증가시키는 로직을 작성해야 합니다.

결론

Custom Hook을 활용하여 무한 스크롤을 구현함으로써 사용자 경험을 향상시킬 수 있습니다. 스크롤 이벤트를 캡처하고 필요한 때에 데이터를 동적으로 로드하는 방식은 대량의 데이터를 처리하는 웹 애플리케이션에서 효율적인 방법 중 하나입니다.

더 자세한 내용은 React 공식 문서를 참조하시기 바랍니다.

참고자료: