IntersectionObserver API 및 임계값

IntersectionObserver는 요소가 뷰포트(또는 다른 스크롤 컨테이너)에 들어오거나 나갈 때 콜백을 실행합니다. 스크롤 리스너를 대체하는 현대적이고 성능이 뛰어난 방법입니다. 브라우저가 계산을 담당하므로 코드가 실제 가시성 전환이 일어날 때만 실행됩니다.

new IntersectionObserver(callback, options)는 관찰자를 생성합니다. 교차 상태가 변경되면 콜백은 항목 배열을 받으며, options는 어떤 컨테이너를 관찰할지와 어떤 임계값에서 실행할지를 제어합니다.

각 항목에는 target(관찰 중인 요소), isIntersecting(불리언 값), intersectionRatio(0에서 1 사이의 값), boundingClientRect, intersectionRect, time이 있습니다. 이진 가시성 확인에는 isIntersecting을 사용하고, 표시 비율에 따른 로직에는 intersectionRatio를 사용하십시오.

{ threshold: 0.5 }는 교차 비율이 50%를 넘나들 때마다 콜백을 실행합니다. [0, 0.25, 0.5, 0.75, 1]과 같은 배열을 사용하면 25% 단위마다 실행됩니다. 진행률 표시기나 "% visible"을 보고하는 분석 기능을 만들 때 유용합니다.

기본적으로 관찰자는 뷰포트와의 교차를 측정합니다. root: someScrollableDiv를 설정하면 내부 스크롤 컨테이너를 기준으로 측정할 수 있습니다. 예를 들어 고정된 높이의 div 안에 있는 가상화 목록에 사용할 수 있습니다.

rootMargin: "200px"는 모든 방향으로 관찰 영역을 200픽셀씩 넓힙니다. 이를 사용하면 더 일찍 실행할 수 있습니다(이미지가 뷰포트에 들어오기 200픽셀 전에 로드 시작). 반대로 더 늦게 실행하여 요소가 뷰포트를 완전히 지난 뒤에만 실행할 수도 있습니다.

observer.observe(element)는 요소 관찰을 시작하고, observer.unobserve(element)는 중지합니다. 콜백이 더 이상 필요하지 않을 때는 항상 관찰을 중지하십시오. 예를 들어 지연 로드가 한 번 실행된 뒤 unobserve하면 메모리를 확보할 수 있습니다.

observer.disconnect()는 관찰 중인 모든 요소의 관찰을 중지합니다. 컴포넌트가 마운트 해제되거나 관찰자가 더 이상 필요하지 않을 때 호출하십시오. 사용이 끝난 뒤에도 남아 있는 관찰자로 인한 누수를 방지할 수 있습니다.

콜백은 비동기적으로 전달되고 일괄 처리됩니다. 빠르게 스크롤하는 동안 여러 교차 상태가 바뀌어도 요소마다 하나씩 실행되는 대신, 모든 항목을 담은 하나의 콜백이 실행됩니다. 스크롤 이벤트마다 실행되는 스크롤 리스너보다 훨씬 성능이 좋습니다.

새 요소를 관찰하면 현재 상태와 함께 콜백이 거의 즉시 한 번 실행됩니다. 관찰을 시작할 때 이미 표시된 요소도 별도의 초기화 경로 없이 처리할 수 있어 유용합니다.

이미지 지연 로드, 요소가 뷰포트에 들어올 때 애니메이션 실행, 무한 스크롤(목록 끝 근처의 sentinel 관찰), 사용자가 실제로 읽은 문서 추적, 주요 영역의 표시 여부에 따른 고정 헤더 전환 등이 있습니다.

IntersectionObserver에서 threshold: 0과 threshold: 1의 차이는 무엇인가요?

IntersectionObserver는 기본 성능 최적화와 일괄 처리를 지원하면서 요소의 가시성이 바뀔 때 콜백을 실행합니다. 가시성 관련 로직에서는 스크롤 리스너 대신 사용하십시오. 임계값(0에서 1 사이의 값 또는 배열), 루트(사용자 지정 스크롤 컨테이너), rootMargin(관찰 영역 확대 또는 축소)으로 설정합니다. 특정 요소는 observe/unobserve로 관리하고, disconnect로 모든 설정을 정리합니다.