Custom Hook을 활용한 인피니티 스크롤 구현

06 Nov 2023

reactjs

개요

인피니티 스크롤은 웹 페이지에서 스크롤을 내릴 때마다 자동으로 데이터를 불러오는 기능입니다. 이 기능은 사용자에게 좋은 사용자 경험을 제공하고, 큰 데이터 세트에서 효율적으로 작업할 수 있게 해줍니다. 이번 기사에서는 React로 인피니티 스크롤을 구현하기 위해 Custom Hook을 사용하는 방법을 알아보겠습니다.

Custom Hook 생성

먼저, useInfiniteScroll라는 Custom Hook을 생성합니다. 이 Custom Hook은 뷰포트에서 스크롤을 감지하고 새 데이터를 가져올 수 있는지 확인하는 로직을 포함할 것입니다.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const handleScroll = () => {
      const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
      
      if (scrollTop + clientHeight >= scrollHeight - 200 && !isFetching) {
        setIsFetching(true);
        loadMoreData();
      }
    };

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

  return isFetching;
};

export default useInfiniteScroll;

인피니티 스크롤 사용하기

인피니티 스크롤을 적용하려는 컴포넌트에서 useInfiniteScroll Hook을 사용합니다. loadMoreData라는 함수를 구현하여, 새로운 데이터를 가져오는 로직을 작성합니다.

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

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

  const loadMoreData = async () => {
    const response = await fetch(`https://api.example.com/data?page=${page}`);
    const newData = await response.json();
    setData(prevData => [...prevData, ...newData]);
    setPage(prevPage => prevPage + 1);
  };

  const isFetching = useInfiniteScroll(loadMoreData);

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

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

export default MyComponent;

결과 확인

위의 예제 코드를 실행하여 웹 페이지에 적용하면, 스크롤을 내릴 때마다 새로운 데이터가 불러와집니다. 페이지 맨 아래에서 스크롤을 내리면 “Loading…” 메시지가 표시되고, 새로운 데이터가 로드된 후에는 메시지가 사라지고 새로운 데이터가 화면에 표시됩니다.

결론

Custom Hook을 사용하여 React에서 인피니티 스크롤을 구현하는 방법을 알아보았습니다. 이러한 방식으로, 웹 애플리케이션에서 대용량 데이터를 효율적으로 처리하고 사용자에게 원할한 사용자 경험을 제공할 수 있습니다.

개요

Custom Hook 생성

인피니티 스크롤 사용하기

결과 확인

결론

참고 자료