[React] 무한 스크롤 구현하기

무한 스크롤은 웹 개발에서 매우 인기 있는 기능입니다. 사용자가 페이지의 끝까지 스크롤할 때마다 새로운 컨텐츠를 자동으로 불러오는 방식으로, 더 나은 사용자 경험을 제공할 수 있습니다. React에서 이러한 기능을 구현하는 한 가지 방법은 IntersectionObserver API를 사용하는 것입니다. 이 글에서는 React에서 IntersectionObserver를 사용하여 무한 스크롤 기능을 구현하는 방법에 대해 자세히 설명하겠습니다.

기본 개념

IntersectionObserver API는 타겟 요소와 상위 요소 또는 최상위 문서의 뷰포트 사이의 교차점에 대한 비동기적으로 콜백 함수를 실행할 수 있게 해줍니다. 이 기능은 특히 무한 스크롤 구현에 유용하며, 브라우저가 자동으로 요소가 화면에 나타나는 시점을 감지하여 추가적인 데이터를 불러올 수 있게 합니다.

구현 단계

1. 컴포넌트 상태 설정: 게시물 목록과 로딩 상태를 관리하기 위한 상태를 설정합니다.
2. 데이터 불러오기 함수 생성: 비동기 함수를 사용하여 데이터를 불러오고, 상태를 업데이트합니다.
3. IntersectionObserver 설정 및 사용: 스크롤이 끝에 도달했을 때 데이터를 불러오는 IntersectionObserver를 설정합니다.
4. 정리 작업: 컴포넌트가 언마운트 될 때 IntersectionObserver를 정리해줍니다.

예제 코드

아래의 예제 코드는 기본적인 무한 스크롤 구현 방법을 보여줍니다.

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

function InfiniteScrollComponent() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const observer = useRef();

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

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0,
    };

    observer.current = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        loadMorePosts();
      }
    }, options);

    const target = document.querySelector('#endOfPosts');
    if (target) observer.current.observe(target);

    return () => observer.current && observer.current.disconnect();
  }, [posts]);

  const loadMorePosts = async () => {
    setLoading(true);
    // 비동기로 게시물 데이터를 불러옵니다 (예: API 호출)
    // 이 예제에서는 가상의 데이터를 사용합니다.
    const newPosts = await fetchPosts();
    setPosts((prevPosts) => [...prevPosts, ...newPosts]);
    setLoading(false);
  };

  // 게시물 데이터를 불러오는 함수 (가상의 예제)
  const fetchPosts = async () => {
    return new Promise((resolve) =>
      setTimeout(() => resolve([{ id: Date.now(), content: '새 게시물' }]), 500)
    );
  };

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>{post.content}</div>
      ))}
      {loading && <p>Loading...</p>}
      <div id="endOfPosts"></div>
    </div>
  );
}

export default InfiniteScrollComponent;

주의사항

• 성능 최적화: IntersectionObserver의 콜백 함수 내에서 수행되는 작업은 최소화하는 것이 좋습니다. 불필요한 렌더링을 피하기 위해, 데이터 로딩 상태 관리가 중요합니다.
• 크로스 브라우징: 대부분의 현대 브라우저에서는 IntersectionObserver를 지원하지만, 구형 브라우저에서는 폴리필을 사용해야 할 수도 있습니다.

이러한 방법을 통해 React 애플리케이션에 효과적으로 무한 스크롤 기능을 구현할 수 있습니다. 사용자 경험을 개선하고, 동적으로 컨텐츠를 로딩함으로써 웹 애플리케이션의 반응성을 높일 수 있습니다.