[React] infinity scroll 무한 스크롤 만들기

🔰 React에서 무한 스크롤을 이해하고 만들 수있다.

 

✅ 무한 스크롤

웹사이트에서 사용자들에게 편리한 글목록을 제공하려는 기존에는 페이지네이션을 이용하여 제공하였다.

하지만 페이지네이션은 사용자가 다음페이지로 넘어가는 번호를 눌러줘야한다는 단점이 있다.

 

사용자들은 덜 기다리고, 더 편리하게 웹서핑을 하고 싶어한다.

이러한 단점을 극복하기 위해 나온 게 무한 스크롤(infinite scroll)이다.

 

 

✅ 소스 코드

 

전체 코드는 다음과 같고 아래에서 좀 더 자세히 설명을 돕고자 한다.

"use strict";

import { useEffect, useState } from "react";

function App() {
  const randomData = [];
  const [pageCount, setPageCount] = useState(0);
  const [fetching, setFetching] = useState(false); // 추가 데이터를 fetch하는 중인지 아닌지 확인하는 역할
  const [myData, setMyData] = useState([]); // API로부터 받아온 데이터를 저장하는 곳

  const createRandomData = () => {
    for (let i = 1; i <= 30; i++) {
      const data = {
        title: `title ${i}`,
        content: Math.random(),
      };

      randomData.push(data);
    }
  };

  createRandomData();

  const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;

    // 페이지 끝에 도달하고 fetch가 진행되지 않는 상태일 때 동작
    if (fetching === false && scrollTop + clientHeight >= scrollHeight) {
      fetchMoreData();
    }
  };

  // scroll event listener 등록 및 해제
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }]);

  const fetchMoreData = async () => {
    // 추가 데이터 fetch하는 상태로 전환
    setFetching(true);

    if (pageCount >= randomData.length) {
      return;
    }

    const fetchedData = randomData[pageCount];
    const mergedData = myData.concat(fetchedData);

    setMyData(mergedData);
    setPageCount(pageCount + 1);

    setFetching(false);
  };

  return (
    <div className="App">
      {randomData.map((elem, index) => (
        <div key={index}>
          <h2>일반</h2>
          <div>{elem.title}</div>
          <div>{elem.content}</div>
        </div>
      ))}
      {myData.map((elem, index) => (
        <div key={index}>
          <h2>새로</h2>
          <div>{elem.title}</div>
          <div>{elem.content}</div>
        </div>
      ))}
    </div>
  );
}

export default App;

 

 

---

 

우선 다음과 같이 샘플 데이터를 만들어 내기 위해 randomData를 얻어낸다.

이 과정이 추후에는 api 호출을 통해 데이터를 받아오는식으로 변경되면 되겠다.

  const createRandomData = () => {
    for (let i = 1; i <= 30; i++) {
      const data = {
        title: `title ${i}`,
        content: Math.random(),
      };

      randomData.push(data);
    }
  };

  createRandomData();

 

useEffect를 통해 scroll 이벤트를 등록해준다.

이때 handleScroll에서 스크롤이 가장 하단에 도착했을 때 fetchMoreData를 호출해준다.

또한 fetching === false를 통해 fetch중에 계속 스크롤을 가장 하단으로 옮겼을 때 중복호출이 되지 않도록 한다.

  const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;

    // 페이지 끝에 도달하고 fetch가 진행되지 않는 상태일 때 동작
    if (fetching === false && scrollTop + clientHeight >= scrollHeight) {
      fetchMoreData();
    }
  };

  // scroll event listener 등록 및 해제
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  });

 

fetchMoreData에서는 setFetching을 통해 마치 mutex를 쓰듯이 작업 동기화를 걸어준다.

그리고 setMyData를 통해 데이터를 추가해준다. 

  const fetchMoreData = async () => {
    // 추가 데이터 fetch하는 상태로 전환
    setFetching(true);

    if (pageCount >= randomData.length) {
      return;
    }

    const fetchedData = randomData[pageCount];
    const mergedData = myData.concat(fetchedData);

    setMyData(mergedData);
    setPageCount(pageCount + 1);

    setFetching(false);
  };