[Javascript] Intersection Observer API

브라우저 창 내에서 노출된 리스트 요소들만 로그를 보내기 위한 방법을 찾던중 알게된 교차 관찰자 API.

 

Intersection Observer는 브라우저 API 중 하나로, 웹 개발자가 요소의 가시성에 대한 변화를 감지하고 대응할 수 있게 해주는 기능입니다. 간단히 말하면 특정 요소가 사용자 화면에 보이는지 안보이는지 판단합니다.

이 API는 특히 웹 페이지에서 스크롤링이나 요소의 위치 변경 등에 따른 가시성 변화를 모니터링할 때 유용합니다.

 

활용 예시

• 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩 (lazy loading)
• 무한 스크롤 구현
• 광고 노출 통계를 쌓고 광고 요금 계산하기 
• 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션 수행하기

 

 

1. 동작 원리

Intersection Observer는 관찰 대상 요소와 관찰자(Observer)를 정의하고, 관찰자는 관찰 대상 요소와 뷰포트(화면에 보이는 영역) 간의 교차 영역(Intersection)의 변화를 감지합니다. 이 교차 영역은 관찰 대상 요소가 뷰포트 내에서 보이는 정도를 나타냅니다.

 

2. 주요 기능

교차 영역 감지: 관찰 대상 요소와 뷰포트 간의 교차 영역을 감지합니다.

이벤트 처리: 교차 영역의 변화에 대한 콜백 함수를 실행하여 특정 작업을 수행합니다.

옵션 설정: 관찰자에 대한 옵션을 설정하여 관찰 대상 요소의 교차 영역을 세밀하게 제어할 수 있습니다.

 

3. 사용 예시

thereshold: 1.0 은 타겟이 100% 노출될때를 감지하는 옵션입니다.

    const parentElement = document.querySelector('#recommendCatchList .swiper-wrapper');

    // Intersection Observer 생성
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 현재 화면에 노출된 요소 처리
          console.log(entry.target);
        }
      });
    });

    // 부모 요소의 자식 요소들을 감시
    const childElements = parentElement.querySelectorAll('#recommendCatchList .swiper-slide');
    childElements.forEach(childElement => {
      observer.observe(childElement);
    });

 

4. 장점

성능 향상: 비동기적으로 실행되기 때문에 메인 스레드에 영향을 주지 않으면서 요소들의 변경 사항들을 관찰할 수 있습니다. (scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제들을 해결해줍니다.)

getBoundingClientRect() 대신에 IntersectionObserverEntry의 속성을 활용하여 요소들의 위치를 알 수 있기 때문에, 리플로우 현상을 방지할 수 있습니다.

유연성: 교차 영역의 비율을 조절하여 세밀한 설정이 가능합니다.

브라우저 호환성: 대부분의 최신 브라우저에서 지원되며, polyfill을 통해 구현이 가능합니다.