스크롤로 트리거되는 효과를 위한 IntersectionObserver

IntersectionObserver API는 하나 이상의 요소가 브라우저 표시 영역 또는 지정된 상위 요소에 들어오거나 나가는지 효율적으로 감시합니다. 모든 픽셀 이동마다 발생하는 스크롤 리스너와 달리, 이 옵저버는 요소가 임계값을 넘을 때만 콜백을 호출하므로 스크롤 기반 효과에 훨씬 더 높은 성능을 제공합니다.

콜백은 관찰 중인 요소마다 하나씩 IntersectionObserverEntry 객체가 들어 있는 배열을 받습니다. 각 항목에는 요소가 표시될 때 true가 되는 불리언 isIntersecting과 현재 표시된 요소의 비율을 0에서 1 사이의 숫자로 나타내는 intersectionRatio가 있습니다. 이를 사용하여 가시성 상태를 판단하십시오.

useEffect 안에서 옵저버를 만들고 observer.observe(ref.current)를 호출하여 요소 감시를 시작하십시오. 추적하려는 DOM 요소에 ref를 연결해야 합니다. 컴포넌트가 마운트된 후 옵저버를 만들어 ref.current가 채워지도록 하십시오.

useEffect의 정리 함수에서 특정 요소의 감시를 중지하려면 observer.unobserve(element)를 호출하고, 모든 감시를 중지하려면 observer.disconnect()를 호출하십시오. 정리를 잊으면 컴포넌트가 마운트 해제된 후에도 옵저버가 남아 오류나 메모리 누수를 일으킬 수 있습니다.

threshold 옵션은 콜백이 호출되는 시점을 제어합니다. 값이 0이면 요소의 픽셀 하나라도 표시되는 즉시 호출됩니다. 값이 1이면 요소가 완전히 표시될 때만 호출됩니다. [0, 0.5, 1]과 같은 배열을 전달하여 여러 가시성 수준에서 콜백을 받을 수도 있습니다.

rootMargin은 CSS와 유사한 구문을 사용하여 유효한 교차 영역을 확장하거나 축소합니다. '100px 0px'을 사용하면 요소가 표시 영역에 들어오기 100px 전에 호출됩니다. '-100px'을 사용하면 요소가 표시 영역 안쪽으로 100px 들어왔을 때만 호출됩니다. 요소가 완전히 표시되기 전에 미리 로드하거나 애니메이션을 시작할 때 유용합니다.

이미지를 지연 로딩하려면 처음에는 src 대신 data-src 속성을 설정합니다. 관찰자가 isIntersecting: true와 함께 실행되면 네트워크 요청을 발생시키도록 data-src를 src에 복사합니다. 그런 다음 이미지는 한 번만 로드하면 되므로 observer.unobserve(entry.target)를 호출합니다.

서서히 나타나는 애니메이션을 만들려면 isIntersecting이 true가 될 때 CSS 클래스를 추가합니다. 예를 들어 element.classList.add('visible')을 사용합니다. CSS에서 다음과 같이 전환을 정의합니다. .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } 및 .card.visible { opacity: 1; transform: none; }을 사용합니다. 관찰자가 이 동작을 효율적으로 시작합니다.

IntersectionObserver는 조회 추적에 이상적입니다. data-analytics-id 속성이 있는 요소가 0.5 임계값에서 교차 상태가 되면 분석 이벤트를 발생시킵니다. 이를 통해 사용자가 실제로 읽은 콘텐츠 섹션을 정확하게 측정할 수 있으며, 단순한 스크롤 깊이 백분율보다 훨씬 신뢰할 수 있습니다.

단일 IntersectionObserver 인스턴스는 각 요소에 대해 observer.observe(element)를 호출하여 여러 요소를 관찰할 수 있습니다. 관찰되는 모든 요소는 동일한 콜백과 옵션을 공유합니다. 알림을 발생시킨 요소를 식별하려면 콜백 내부에서 entry.target을 사용합니다.

재사용 가능한 useInView 훅은 [ref, inView]를 반환합니다. 모든 요소에 ref를 연결하고 inView를 읽어 현재 표시되고 있는지 확인할 수 있습니다. 이 훅은 임계값과 rootMargin을 설정할 수 있는 options 객체를 받습니다. 이러한 추상화 덕분에 어떤 컴포넌트에서든 스크롤 효과를 선언적으로 구현할 수 있습니다.

IntersectionObserver의 0 임계값은 무엇을 의미합니까?

IntersectionObserver는 isIntersecting과 intersectionRatio를 사용하여 요소의 표시 여부를 효율적으로 추적합니다. unobserve 또는 연결 해제를 사용하여 항상 정리해야 합니다. 임계값을 사용하여 시작 지점을 제어하고 rootMargin을 사용하여 감지 영역을 확장합니다. 지연 로딩, 애니메이션, 분석 추적에 적용할 수 있습니다.