코딩을 시작하기 전에 페이지 매김이 무엇인지, 왜 필요한지 자세히 알고 싶다면 여기에서 내 블로그를 확인하세요.

화면에 50개의 항목을 표시하고 사용자가 맨 아래에 도달할 때마다 다음 50개의 항목을 로드하라는 요청이 있다고 가정해 보겠습니다.
이를 위해서는 스크롤 위치를 추적하고 이를 문서 본문 offsetHeight와 계속 비교해야 합니다.

스크롤 위치를 얻으려면 window.scrollY.
를 사용합니다. 기본적으로 window.scrollY는 페이지가 위에서 수직으로 스크롤된 픽셀 수를 제공합니다. 사용자가 페이지를 얼마나 아래로 스크롤했는지 알려줍니다.
window.scrollY와 함께 두 개의 값을 더 사용하여 사용자가 페이지 하단에 도달했는지 여부를 확인합니다.
window.innerHeight: 이는 창에서 보이는 부분(뷰포트)의 높이를 나타냅니다. 사용자가 현재 브라우저에서 스크롤 없이 볼 수 있는 영역의 높이입니다.

document.body.offsetHeight: 본문 요소의 전체 높이를 제공합니다.

암호:

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i {i});
  }

  useEffect(() => {
    const onScroll = () => {
      if (
        window.innerHeight   window.scrollY >=
        document.body.offsetHeight - 40
      ) {
        setitems(items   50);
      }
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [items]);

  return 
{query.map((q) => q)}
;
}

설명: 페이지의 첫 번째 렌더링은 스크롤 이벤트를 추가하는 useEffect 후크를 트리거합니다. 스크롤 이벤트가 발생할 때마다 onScroll() 메서드가 호출되어 스크롤 위치를 확인합니다. 하위-40에 있으면 항목 상태에 50개 이상의 항목이 추가됩니다.