Reactjs 튜토리얼: Intersection Observer를 사용한 무한 스크롤.

무한 스크롤이란 무엇이며 이에 대한 필요성은 무엇입니까?

스크롤은 웹페이지 콘텐츠의 일부를 가로 또는 세로(대부분의 경우)로 이동하는 사용자 동작입니다.

이 기사를 읽는 동안 여러분도 그렇게 하게 될 것입니다.

Infinite는 웹페이지를 아래로 스크롤할 때 새로운 콘텐츠가 자동으로 로드된다는 의미입니다.

그렇습니다. 그런데 왜 구현해야 할까요?

검색 가능성

즐겨찾는 전자상거래 매장에서 블랙 프라이데이 세일을 한다고 가정해 보세요.

탐색 페이지에서 몇 가지 제품을 찾았지만 더 많은 제품 대신 웹페이지 하단으로 스크롤하면 다음 제품 목록으로 이동하는 버튼을 발견했습니다.

새 제품을 만나보실 수 있습니다. (단, 해당 액션 버튼이 있는 경우에만 해당됩니다.)

무한 스크롤은 사용자가 놓쳤을 수도 있는 더 많은 콘텐츠를 찾는 데 도움이 됩니다.

구현

무한 스크롤을 구현하려면 사용자가 페이지 하단이나 컨테이너에 도달했는지 계속 확인해야 합니다.

그러나 스크롤 위치를 감지하는 데는 비용이 많이 들고 브라우저와 장치가 다르기 때문에 위치 값을 신뢰할 수 없습니다.

그래서 한 가지 방법은 페이지의 마지막 콘텐츠(요소)와 뷰포트 또는 컨테이너와의 교차점을 보는 것입니다.

교차점은 어떻게 찾나요?

교차점 관찰자

콘텐츠나 목록의 끝에서 요소를 관찰할 수 있는 웹 API입니다.

이 요소("sentinel")가 표시되면(뷰포트와 교차하고 콜백 함수가 트리거됩니다.

이 기능을 통해 더 많은 데이터를 가져와 웹페이지에 로드할 수 있습니다.

이 전체 관찰은 비동기식으로 이루어지며, 이는 메인 스레드에 미치는 영향을 최소화합니다.

---

Reactjs에서 Intersection Observer를 구현하기 위해 소셜 피드의 예를 들어 게시물 목록에서 무한 스크롤을 수행할 것입니다.

이 구성요소를 살펴보면 바로 아래에 있는 각 구성 요소에 대한 분석을 따라갈 수 있습니다.

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

피드 목록의 마지막 게시물(센티넬이라고 함)이 뷰포트와 교차하는 시점을 감지하는 것이 목표입니다. 이런 일이 발생하면 더 많은 게시물이 로드되어 표시됩니다.

---

에이. 상태 및 참조 초기화

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

cardRefs 목록에서 카드를 나타내는 DOM 요소를 추적하는 배열입니다.

containerRef 스크롤 가능한 컨테이너를 나타냅니다.

listItems 페이지에 현재 표시되는 항목의 배열을 보유합니다.

비. 목록 렌더링 및 참조 할당

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

containerRef 스크롤이 발생할 컨테이너를 표시합니다.

cardRefs 목록의 각 카드에 참조를 할당합니다. 이를 통해 관찰자에게 모니터링할 요소(예: 마지막 카드)를 알려줄 수 있습니다.

listItems를 매핑하여 목록의 각 항목을 렌더링합니다.
각 div는 카드 스타일로 지정되며 React에 대한 고유한 키를 갖습니다.

기음. 지난 포스팅(항목)을 관찰합니다.

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

옵션 개체

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

root 스크롤 컨테이너를 지정합니다.

containerRef.current는 모든 카드를 래핑하는 div를 나타냅니다.
루트가 null이면 기본적으로 뷰포트를 관찰합니다.

rootMargin: 루트 주위에 추가 여백을 정의합니다.

'0px'는 추가 공간이 없음을 의미합니다. "100px"과 같은 값을 사용하여 관찰자를 더 일찍 트리거할 수 있습니다(예: 요소가 나타나기 직전일 때).

임계값: 관찰자가 트리거하기 위해 표시되어야 하는 대상 요소의 양을 결정합니다.

0.5는 마지막 카드의 50%가 표시되면 콜백이 트리거된다는 의미입니다.

관찰자 만들기

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

IntersectionObserver 앞서 정의한 콜백 함수와 옵션 개체를 허용합니다.

관찰된 요소가 옵션에 지정된 조건을 충족할 때마다 콜백이 실행됩니다.

entries 매개변수는 관찰된 요소의 배열입니다. 각 항목에는 요소가 교차하는지(표시되는지)에 대한 정보가 포함됩니다.

entry.isIntersecting이 true인 경우 이제 마지막 카드가 표시된다는 의미입니다.

1. setListItems를 사용하여 목록에 새 항목을 추가합니다.
2. 중복 트리거를 방지하려면 현재 요소(entry.target)를 관찰하지 마세요.

마지막 카드 관찰

 useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe each card
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

cardRefs.current: 모든 카드에 대한 참조를 추적합니다.

listItems.length - 1: 목록의 마지막 항목을 식별합니다.

lastCard가 존재하는 경우,observer.observe(lastCard)를 사용하여 관찰을 시작하세요.

관찰자는 이 카드를 모니터링하고 카드가 표시되면 콜백을 트리거합니다.

청소

const options = {
  root: containerRef.current, // Observe within the container
  rootMargin: "0px",         // No margin around the root container
  threshold: 0.5,           // Trigger when 50% of the element is visible
};

observer.disconnect()는 이 useEffect에 의해 생성된 모든 관찰자를 제거합니다.

이렇게 하면 구성 요소가 마운트 해제되거나 다시 렌더링될 때 이전 관찰자가 정리됩니다.

---

각 단계에서는 어떤 일이 발생하나요?

1. 사용자 스크롤

사용자가 스크롤하면 마지막 카드가 표시됩니다

2. 교차점 관찰자 트리거

마지막 카드의 50%가 보이면 관찰자의 콜백
달려갑니다.

3. 항목 추가

콜백은 목록(setListItems)에 새 항목을 추가합니다.

4. 반복

관찰자는 이전 마지막 카드의 연결을 끊고
에 연결합니다. 새로운 마지막 카드입니다.

이것이 Intersection Observer를 사용하여 무한 스크롤을 구현하는 방법입니다.

도움이 되었기를 바랍니다 :)

감사합니다.

위 내용은 Reactjs 튜토리얼: Intersection Observer를 사용한 무한 스크롤.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!