🌵 React에서 무한스크롤 기능 구현하기

React로 무한 스크롤(Infinite Scroll) 구현하기 🚀

요즘 소셜 미디어나 뉴스 피드를 보면 콘텐츠가 끝없이 이어지는 경험을 쉽게 할 수 있습니다. 사용자가 페이지를 아래로 스크롤하면 새로운 콘텐츠가 자연스럽게 로드되는 것, 이것이 바로 무한 스크롤(Infinite Scroll) 입니다.

이번 포스트에서는 왜 무한 스크롤이 필요하며, React 환경에서 react-intersection-observer 라이브러리를 사용해 얼마나 쉽고 효율적으로 구현할 수 있는지 알아보겠습니다.

🤔 왜 필요할까요? 한 번에 모든 데이터를 불러오면 안 되나요?

만약 수백, 수천 개의 데이터를 한 페이지에 모두 표시하려고 하면 여러 성능 문제가 발생합니다.

느린 초기 로딩 속도: 사용자는 데이터를 모두 다운로드할 때까지 긴 시간 동안 빈 화면이나 로딩 화면을 봐야 합니다.

브라우저 과부하: 한 번에 너무 많은 데이터를 화면에 그리려고 하면(렌더링) 브라우저의 렌더링 엔진에 큰 부담을 줍니다. 이는 심각한 UI 끊김(Jank) 현상이나 브라우저 멈춤을 유발할 수 있습니다.

이 문제를 해결하는 대표적인 방법이 바로 페이지네이션(Pagination)과 무한 스크롤(Infinite Scroll)입니다.

🧐 페이지네이션 vs. 무한 스크롤

두 방식은 UX 관점에서 명확한 차이가 있으며, 서비스의 목적에 맞게 선택해야 합니다.

페이지네이션: 사용자가 특정한 목적을 가지고 정보를 찾을 때 적합합니다. (예: 구글 검색 결과, 이커머스 상품 목록)

무한 스크롤: 사용자가 뚜렷한 목적 없이 콘텐츠를 탐색하고 발견하는 것을 즐길 때 적합합니다. (예: 인스타그램 피드, 핀터레스트)

오늘은 이 중에서 '무한 스크롤' 기능 구현에 대해 집중적으로 다뤄보겠습니다.

⚙️ React에서 무한 스크롤 구현하기

react-intersection-observer는 브라우저의 Intersection Observer API를 React에서 쉽게 사용할 수 있도록 도와주는 강력한 라이브러리입니다. 스크롤 이벤트를 직접 감지하는 것보다 훨씬 효율적이고 성능이 뛰어납니다.

1. 라이브러리 설치

먼저 프로젝트에 해당 라이브러리를 설치합니다.

npm install react-intersection-observer

2. 핵심 로직 및 사용 예시

이제 무한 스크롤을 구현한 전체 코드를 살펴보겠습니다.

import React, { useEffect, useState } from 'react';
import MovieHeader from "./MovieHeader";
import MovieMain from "./MovieMain";
import MovieList from "./MovieList";
import axiosInstant from "../../api/axios";
import { useInView } from "react-intersection-observer";

function Movie() {
    const [nowData, setNowData] = useState([]);
    const [nowLoading, setNowLoading] = useState(false);
    const [nowError, setNowError] = useState(null);
    const [page, setPage] = useState(1);
    const [hasMore, setHasMore] = useState(true);

    const { ref, inView } = useInView({
        threshold: 0.5,
    });

    // 데이터 로딩 함수
    const fetchMovies = async () => {
        // 이미 로딩 중이거나 더 이상 데이터가 없으면 실행하지 않음
        if (nowLoading || !hasMore) return;

        setNowLoading(true);
        try {
            const response = await axiosInstant.get(`now_playing?page=${page}`);
            const { results, total_pages } = response.data;

            setNowData(prev => [...prev, ...results]);
            setHasMore(total_pages > page);
            setPage(prevPage => prevPage + 1); // 다음 페이지를 준비

        } catch (e) {
            setNowError(e);
        } finally {
            setNowLoading(false);
        }
    };

    // `inView` 값이 true로 변경될 때 다음 페이지 데이터를 불러옵니다.
    useEffect(() => {
        if (inView) {
            fetchMovies();
        }
    }, [inView]);

    return (
        <>
            <MovieHeader />
            <MovieMain />
            <MovieList title="Now Playing" movies={nowData} error={nowError} />
            
            {/* 이 div가 화면에 보이면 다음 데이터를 로드합니다. */}
            <div ref={ref}></div>
            
            {nowLoading && <p>Loading...</p>}
            {nowError && <p>Error!</p>}
        </>
    );
}

export default Movie;

3. 코드 동작 원리

위 코드의 동작 원리는 생각보다 간단합니다.

감시 대상 지정 (ref): useInView 훅이 반환하는 ref를 리스트의 맨 마지막에 있는