개발하는데 다 이유가 있겠지

Intersection Observer란?

---

기존 자바스크립트의 'scroll' 이벤트는 스크롤시 짧은 시간 내에 수 백, 수천의 이벤트를 동기적으로 실행될 수 있어 성능의 악영향을 끼쳤다.

페이지 내의 다양한 요소(Lazy Loading, 무한 스크롤 등)의 이유로 'scroll' 이벤트를 리스닝하기 때문에 무수한 콜백함수가 실행될 수 있었다.

위의 문제는 메인 쓰레드에 큰 부하를 줄 수 있다.

또한 Intersection Observer는 reflow를 발생시키지 않는다.

reflow, repaint에 대해서는 다음 번에 자세히 정리하도록 하겠다.

Intersection Observer는 루트 요소와 타겟 요소의 교차점을 관찰(Observe)해 타켓과 루트 요소가 교차(Intersection)하는지 아닌지 구별하는 기능을 제공한다.

scroll 이벤트와 다르게 교차 시 비동기적으로 실행되기 때문에 성능상 유리하다.

 

사용법

---

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

// options에 따라 인스턴스 생성
let observer = new IntersectionObserver(callback, options);

// 타겟 요소 관찰 시작
let target = document.querySelector('#listItem');
observer.observe(target);

new 생성자를 통해 인스턴스를 생성하고 Callback과 Options을 인자로 받는다.

• Callback : 가시성의 변화가 생겼을 때 호출되는 콜백 로직
• Options : 인스턴스에서 콜백이 호출되는 상황

 

Callback

타겟 요소의 관찰이 시작되거나, 가시성에 변화가 감지되면(threshold와 만나는 순간) 등록된 callback이 실행된다.

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // 각 entry는 가시성 변화가 감지될 때마다 발생하고 그 context를 나타냄
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

 

Options

root (number type)

타겟 요소의 가시성을 확인할 때 사용되는 루트 요소이다. 루트는 타켓 요소보다 상위 요소인 요소의 조상 요소이어야 한다.

설정하지 않거나 root값을 null을 주게 되면 기본 값으로 브라우저 뷰표트가 설정된다.

rootMargin (string type)

margin을 주어 루트 요소의 범위를 확장할 수 있다. 확장된 영역 안에 타겟 요소가 들어가면 가시성에 변화가 생긴다. 기본 값은 0이고 따로 값을 지정할 경우 단위를 입력해야한다.

threshhold (number type, number Array type)

콜백이 실행될 타겟 요소의 가시성 퍼센트를 나타내는 단일 숫자 및 배열이 들어갈 수 있다. 타겟 요소가 어느 정도 보여졌는지에 따라 콜백을 호출할 수 있다.

// 타겟 요소가 50% 가시성이 확인되었을 때
let observer1 = new IntersectionObserver(callback, {
	threshold: 0.5
});

// 타겟 요소가 25% 단위로 가시성이 확인되었을 때
let observer1 = new IntersectionObserver(callback, {
	threshold: [0, 0.25, 0.5, 0.75, 1]
});

 

Reference
실무에서 느낀 점을 곁들인 Intersection Observer API 정리