반응으로 무한 스크롤 구현

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

화면에 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 <= items; i++) {
    query.push(<p>{i}</p>);
  }

  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 <div className="App">{query.map((q) => q)}</div>;
}

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

위 내용은 반응으로 무한 스크롤 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!