[Web] IntersectionObserver API

안녕하세요, 오늘은 Web API 중 하나인 Intersection Observer API에 대해 알아보는 시간을 갖겠습니다. 

 

현대의 웹 개발은 사용자 경험을 개선하고 페이지 성능을 최적화하는 것이 매우 중요합니다. 이를 위한 다양한 기술 중 하나가 바로 "Intersection Observer API"입니다. 

 

 

IntersectionObserver 

he Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

Intersection Observer API는 웹 페이지에서 요소가 화면에 보이는지 여부를 비동기적으로 감시할 수 있는 브라우저 API입니다. 요소를 감시하고 해당 요소가 유저에게 표시되는 시점을 알려줍니다. 

이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제없이 사용할 수 있습니다.

 

Intersection Observer API를 활용하면 무한 스크롤, 이미지 로딩 최적화, 스크롤 애니메이션, 광고 트래킹 등 다양한 기능을 구현할 수 있습니다. 

 

1. 요소 관찰

new IntersectionObserver()를 통해 생성한 인스턴스(io)로 관찰자(Observer)를 초기화하고 관찰할 대상(Element)을 지정합니다. 생성자는 2개의 인수(callback, options)를 가집니다.

let observer = new IntersectionObserver(callback, options);

options으로 root요소와, root요소의 마진, threshold를 지정할 수 있습니다. 

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

 

2. Observer 생성

관찰자(observer)에게 target요소를 관찰하도록 지시합니다. 

const target = document.querySelector('.target-element');
observer.observe(target);

 

3. Callback

IntersectionObserver API는 대상을 지정하고 대상에 대한 관찰 정보를 받아야 하기 때문에 콜백함수로 이를 실행할 수 있습니다.  콜백은 2개의 인수(entries, observer)를 가집니다. 

function callback(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 요소가 화면에 나타났을 때 실행할 작업
    } else {
      // 요소가 화면에서 사라졌을 때 실행할 작업
    }
  });
}

 

entries

entries는 IntersectionObserverEntry 인스턴스의 배열입니다.
IntersectionObserverEntry는 읽기 전용(Read only)의 다음 속성들을 포함합니다.

• boundingClientRect: 관찰 대상의 x 및 y좌표와 크기 제공
• intersectionRect: 관찰 대상의 보이는 영역의 x 및 y좌표와 크기 제공
• intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)
• isIntersecting: 관찰 대상의 교차 상태(Boolean)  -> 대상이 화면에 표시되는지에 대한 여부
• rootBounds: 지정한 루트 요소의 정보
• target: 관찰 대상 요소(Element)
• time: 변경이 발생한 시간 정보

threshold (임계값) : 0~1사이의 숫자로 default값은 0입니다. 

• 0 :  target 요소가 화면에 한 픽셀이 보이는 즉시 알림을 줍니다. 
• 0.5 : target 요소가 50% 보일 때 콜백함수가 실행됩니다. 
• 1: target 요소가 100% 보일 때 콜백함수가 실행됩니다. 

const target = document.querySelector('.target-element');
const observer = new IntersectionObserver((items) => {
	items.forEach((item)=> {
    	if(item.isIntersecting) {
        	console.log(item.target, "is visible!");
        }
    });
  },
  {
  	threshold: 0.5
  }
  );
  
  observer.observe(target);

 

 

---

Intersection Observer API는 웹 개발에서 사용자 경험을 개선하고 페이지 성능을 향상하는 데 큰 도움을 주는 강력한 도구입니다. 요소의 가시성을 감시하고 필요한 작업을 수행할 수 있으므로, 무한 스크롤, 레이지 로딩, 애니메이션 효과, 광고 트래킹 등 다양한 시나리오에서 활용할 수 있습니다. 이 API를 사용하여 사용자에게 더 나은 웹 경험을 제공하는 방법을 고민해 보세요.

---

@Reference

• MDN- Intersection Observer API