2024 08 23

2024-08-23¶

Intersection Observer¶

참고: https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API 참고: https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC

개요
- 상위 요소/최상위 문서의 viewport(보여지는 다각형 부분)와 대상 요소 사이의 변화를 비동기적으로 관찰

필요성
- 페이지 스크롤 시, 이미지/컨텐츠의 지연로딩 필요
- 더 많은 컨텐츠 로드 + 무한 스크롤을 구현할 필요성
- 광고가 보이면 charge 하는 비즈니스 모델의 테크니컬 구현
- 사용자에게 보이면 특정 애니메이션을 수행하는 여부

Intersection Observer가 가시성을 계산하는 방법
- Intersection Observer는 모든 영역을 사각형으로 취급
- 요소의 모든 부분을 감싸는 가장 작은 사각형으로 가정하고 교차성을 계산함.

사용 방법

let options = {
    // 타겟 요소보다 상위 요소여야 함. null 지정시, 브라우저 뷰포트로 설정
    root: document.querySelector('#scrollArea'),
    // 루트 요소의 범위를 확장하여, 확장 영역안에 타겟 요소가 들어가면 가시성에 변화로 판단
    rootMargin: '0px',
    // 콜백이 실행될 타겟 요소의 가시성 퍼센티지 [0, 0.25, 0.5, 0.75, 1]
    threshold: 1.0
}

// callback: 가시성에 변화가 생겼을 때 호출되는 콜백 로직
// options: 만들어진 인스턴스에서 콜백이 호출되는 상황
let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#listItem');
observer.observe(target);

callback

타겟 요소의 관찰 시작 or 가시성 변화 감지 시, 등록된 callback 호출됨

해당 콜백은 메인스레드에서 처리되고, entries, observer 받음

let callback = (entries, observer) => {
    entries.forEach(entry => {
        // 각 entry는 가시성 변화 감지시 마다 context 나타냄
        // - entry.boundingClientRect
        // - entry.intersectionRatio
        // - entry.intersectionRect
        // - entry.isIntersecting
        // - entry.rootBounds
        // - entry.target
        // - entry.time
    });
}

Entries
- InterserctionObserverEntry 인스턴스 담은 배열
- 루트요소와 타겟요소가 교차되면서의 상황을 모두 읽기 전용으로 묘사
- entry.isIntersecting: 해당 entry에 타겟 요소가 루트 요소와 교차하는지 여부

Methods
- IntersectionObserver.observe(target): 타깃 요소 관찰 시작
- IntersectionObserver.unobserve(target): 타깃 요소 관찰 중지
- IntersectionObserver.disconnect(): 인스턴스의 모든 타깃 요소 관찰 중지
- IntersectionObserver.takerecords(target): IntersectionObserverEntry 인스턴스 배열 리턴