Colin's Blog
Suspense를 사용하여 무한 스크롤을 구현하는 방법은?

개요

이번 튜토리얼에서는 React의 Suspense 기능과 무한 스크롤을 함께 사용하여 웹 페이지의 사용자 경험을 향상시킬 수 있는 방법을 알아보겠습니다. Suspense는 데이터 가져오기와 같은 지연 시간이 필요한 작업을 처리하고 로딩 상태를 처리하는 데 사용되며, 무한 스크롤은 사용자가 스크롤을 내릴 때 추가적인 컨텐츠를 동적으로 로드하는 기능입니다.

단계 1: React 프로젝트 설정

먼저 React 프로젝트를 설정해야 합니다. 아래의 명령을 통해 React 앱을 생성합니다.

npx create-react-app infinite-scroll-app

프로젝트 디렉토리로 이동한 후 아래의 명령을 사용하여 React 앱을 실행합니다.

cd infinite-scroll-app
npm start

단계 2: 무한 스크롤 컴포넌트 작성

이제 무한 스크롤을 구현할 컴포넌트를 작성해보겠습니다. InfiniteScroll 컴포넌트를 생성하고 아래의 코드를 추가합니다.

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

const InfiniteScroll = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [page, setPage] = useState(1);

  useEffect(() => {
    // 스크롤 이벤트 리스너 추가
    window.addEventListener('scroll', handleScroll);
    // 컴포넌트가 처음 마운트될 때 데이터를 가져옴
    fetchData();

    return () => {
      // 컴포넌트가 언마운트될 때 스크롤 이벤트 리스너 제거
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const fetchData = async () => {
    try {
      // API 호출
      const response = await fetch(`https://api.example.com/data?page=${page}`);
      const newData = await response.json();
      setData([...data, ...newData]);
      setPage(page + 1);
      setIsLoading(false);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  const handleScroll = () => {
    // 스크롤이 끝에 도달했는지 확인
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      // 추가 데이터를 가져오기 위해 로딩 상태 설정
      setIsLoading(true);
      fetchData();
    }
  };

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          {/* 데이터 렌더링 */}
          <p>{item}</p>
        </div>
      ))}
      {/* 로딩 상태 표시 */}
      {isLoading && <p>Loading...</p>}
    </div>
  );
};

export default InfiniteScroll;

코드 설명

위의 코드는 InfiniteScroll 컴포넌트를 정의하고, 데이터 가져오기 및 추가 데이터 로드를 위한 함수들을 포함하고 있습니다.

useEffect를 사용하여 컴포넌트가 처음 마운트될 때 스크롤 이벤트 리스너를 추가하고, 데이터를 가져오는 fetchData 함수를 실행합니다. 또한 컴포넌트가 언마운트될 때 스크롤 이벤트 리스너를 제거합니다.

fetchData 함수는 fetch를 사용하여 API로부터 데이터를 가져옵니다. 데이터를 가져온 후 현재 데이터 배열에 새로운 데이터를 추가합니다. 이후 페이지 번호를 증가시키고 로딩 상태를 해제합니다.

handleScroll 함수는 사용자가 스크롤을 끝까지 내렸을 때 추가 데이터를 가져오는 역할을 합니다. 이때 로딩 상태를 설정하여 사용자에게 로딩 중임을 알립니다.

마지막으로 data를 매핑하여 모든 데이터를 렌더링하고, isLoading 변수가 true일 때 로딩 메시지를 표시하는 JSX를 반환합니다.

단계 3: 무한 스크롤 컴포넌트 사용

마지막으로 App 컴포넌트에서 InfiniteScroll 컴포넌트를 사용하여 무한 스크롤을 구현해보겠습니다. src/App.js 파일을 열고 다음과 같이 수정합니다.

import React from 'react';
import InfiniteScroll from './InfiniteScroll';

function App() {
  return (
    <div>
      <h1>Infinite Scroll Example</h1>
      <InfiniteScroll />
    </div>
  );
}

export default App;

위의 코드는 InfiniteScroll 컴포넌트를 App 컴포넌트에서 사용하고 있습니다. 이제 앱을 실행하고 스크롤을 내려보면 추가 데이터가 스크롤 동작에 따라 동적으로 로드되는 것을 확인할 수 있습니다.

결론

이번 튜토리얼에서는 Suspense와 무한 스크롤을 함께 사용하여 웹 애플리케이션의 사용자 경험을 향상시키는 방법을 소개했습니다. 예제 코드를 사용하여 자신만의 무한 스크롤 구현에 도전해보세요.

#React #웹개발

© 2018 Colin. All rights reserved.