React에서 Intersection Observer를 사용하는 방법

오늘은 몇 가지 예시를 통해 React에서 교차 관찰자 API를 사용하는 방법을 살펴보겠습니다.

Mozilla 웹 문서에서는 교차 관찰자 API를 다음과 같이 설명합니다.

모니터링하려는 요소가 다른 요소(또는 뷰포트)에 들어오거나 나갈 때마다 또는 두 요소가 교차하는 값이 요청된 양만큼 변경될 때 실행되는 콜백 함수를 코드에서 등록할 수 있습니다. 이렇게 하면 사이트는 이러한 유형의 요소 교차를 관찰하기 위해 더 이상 메인 스레드에서 어떤 작업도 수행할 필요가 없으며 브라우저는 적합하다고 판단되는 대로 교차 관리를 자유롭게 최적화할 수 있습니다.

간단히 말하면 특정 요소가 뷰포트에 표시되는 시기를 감지할 수 있으며 이는 요소가 원하는 교차 비율을 충족하는 경우에만 발생합니다.

보시다시피 페이지를 아래로 스크롤하면 예상 한도에 도달할 때까지 교차 비율이 증가하고 그 순간 콜백을 실행하는 함수가 실행됩니다.

---

첫 번째 단계

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

교차점 관찰자 생성자 개체에는 두 개의 인수가 필요합니다.

1. 콜백 함수
2. 옵션

그게 다입니다. 몇 가지 작업을 볼 준비가 되었습니다. 하지만 먼저 각 옵션이 무엇을 의미하는지 알아야 합니다. 옵션 인수는 다음 값을 가진 개체입니다.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

• root: 대상의 가시성을 확인하기 위해 뷰포트로 사용되는 요소입니다. 대상의 상위 항목이어야 합니다. 지정되지 않거나 null인 경우 기본값은 브라우저 뷰포트입니다.
• rootMargin: 이 값 세트는 교차점을 계산하기 전에 루트 요소 경계 상자의 각 측면을 늘리거나 줄이는 데 사용되며 옵션은 CSS의 여백 옵션과 유사합니다.
• 임계값: 관찰자 콜백이 실행되어야 하는 대상의 가시성 비율을 나타내는 단일 숫자 또는 숫자 배열의 범위는 0~1.0입니다. 여기서 1.0은 각 픽셀이 뷰포트에 표시된다는 의미입니다.

---

반응에서 사용

이제 React에서 교차 관찰자 API의 구현을 살펴보겠습니다.

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

1. 관찰하려는 요소에 대한 참조로 시작하고 반응 후크 useRef를 사용하세요.
2. 상태 변수 isVisible을 생성합니다. 이를 사용하여 상자가 뷰포트에 있을 때마다 메시지를 표시합니다.
3. IntersectionObserverEntries 배열을 매개변수로 받는 콜백 함수를 선언합니다. 이 함수 내에서 첫 번째이자 유일한 항목을 가져와 뷰포트와 교차하는지 확인하고 교차하는 경우 항목 값으로 setIsVisible을 호출합니다. .is교차 중(true / FALSE).
4. 이미지와 동일한 값으로 옵션 객체를 생성합니다.
5. useEffect 반응 후크를 추가하고 방금 전에 만든 콜백 함수와 옵션을 사용하여 관찰자 생성자를 만듭니다. 우리의 경우 선택 사항이지만 구성 요소가 마운트 해제될 때 대상을 감시하지 않도록 정리 기능을 반환할 수 있습니다.
6. 관찰하려는 요소에 useRef 변수를 설정합니다.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

1. 이 HTML에 스타일을 추가해 보겠습니다.

1. 이것이 우리에게 필요한 전부입니다. 간단하고 쉽습니다!

이것은 단지 기본적인 구현일 뿐이며 이를 수행하는 방법에는 여러 가지가 있다는 점을 기억하십시오.

---

이제 이전과 동일한 코드를 구현하지만 useElementOnScreen이라는 Nu Hook에서 모든 로직을 분리합니다.

const containerRef = useRef(null)
const [isVisible, setIsVisible] = useState(false)

const callbackFunction = (entries) => {
  const [entry] = entries
  setIsVisible(entry.isIntersecting)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}

useEffect(() => {
  const observer = new IntersectionObserver(callbackFunction, options)
  if (containerRef.current) observer.observe(containerRef.current)

  return () => {
    if (containerRef.current) observer.unobserve(containerRef.current)
  }

}, [containerRef, options])

return (
  <div classname="app">
    <div classname="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div classname="section"></div>
    <div classname="box" ref="{containerRef}">Observe me</div>
  </div>
)

1. 매개변수 옵션을 사용하여 useElementOnScreen이라는 새 함수를 만듭니다
2. useRef, useState 및 useEffect 전체를 새 후크 내부로 이동합니다.
3. 이제 후크에서 누락된 유일한 것은 return 문입니다. isVisible 및 ContainerRef를 배열로 전달합니다.
4. 좋아, 거의 다 왔습니다. 컴포넌트에서 호출하여 작동하는지 확인하면 됩니다!

<div classname="box" ref="{containerRef}">Observe me</div>

1- 새로 생성된 후크를 구성 요소로 가져옵니다.
2 - 옵션 개체로 초기화합니다.
3 - 이렇게 마무리합니다.

축하합니다. 교차로 관찰자 API를 성공적으로 사용하고 이에 대한 후크도 만들었습니다!

---

크레딧

원래 producthackers가 작성한 React를 사용한 Intersection Observer

이 글을 읽어주셔서 감사합니다. 유용한 정보를 제공해 드릴 수 있기를 바랍니다. 그렇다면 이 글을 추천해주시고, 더 많은 분들이 보실 수 있도록 ♥ 버튼을 눌러주시면 정말 좋겠습니다.

위 내용은 React에서 Intersection Observer를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!