Intersection Observer API 가 뭔지 알아보기

Intersection Observer API는 개인 프로젝트를 천천히 하는중 알게된 API인데 워낙 이해하기 어렵지만 기록하고자한다.

Intersection Observer API

Intersection Observer API는 타겟 요소와 최상위 요소의 ViewPort 사이의 교차 발생을 비동기 적으로 관찰하는 Web API를 말한다.

이거 말하는건가?

아무튼 대충 해석하면 감시하고자 하는 현재의 엘리먼트가 다른 요소의 Viewport에 들어가거나 나갈때를 감지한다.

Element.getBoundingClientRect() 같은 메소드로 해당 엘리먼트의 Viewport를 구하였지만 항상 메인 스레드(thread) 위에서 동작하기 때문에 때에따라선 성능 문제를 발생했었다.

Intersection Observer API는 비동기적으로 관찰하여 메인 스레드에 영향을 주지 않고, 현재 요소와 상위 요소(root)의 교차발생시 Callback함수를 실행시켜준다.

이 API의 사용처는 다음과 같다.

1. 이미지 지연로딩(Lazy Loading)
2. 요즘 보이는 기술인 Infiniti Scrolling 비동기 무한 스크롤 UI
3. 광고 매출을 계산하기 위한 배너
4. 애니메이션을 수행할지 여부

Intersection Observer API 사용하기

Intersection Observer를 생성할때 두가지 인자를 받는데,
첫번째 인자는 Callback 함수, 두번째 인자는 가시성 확보를 위한 각종 옵션이다.

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

let observer = new IntersectionObserver(callback, options);

root

root: 관측 요소(target element)를 감싸는 element를 지정하는 옵션이 root이다. 혹은 null로 설정할 수있다. 만약 null이라면 viewport가 된다.

 <div id="im-root">
   <img src=???? className="image" />
 </div>

문서 내의 관측하고자 하는 요소가 .image 라고 가정하면, root는 document.querySelector("#scroll")이 된다.

rootMargin

rootMargin: root 요소를 감싸는 margin 값을 지정한다. css와 동일하며 다양한 단위로 작성할 수있다.

threshold

threshold: 관측 요소(target element)가 root 와 몇 % 교차했을 때, callback을 실행할지 결정하는 값이다.

0.0부터 1.0까지의 부동 소수점 값을 지원하고, 배열을 통해 n%당 callback을 실행시켜주고 싶다면 이렇게 입력하면된다.

threshold: [0.1, 0.25, 0.5, 0.75, 1.0]

threshold는 더쉽게 보자면
관측 요소가 root 요소내에서 n% 모습을 보일때의 값이므로, 관측 요소가 얼마나 노출되었는지 보여주는 값이다.

callback

callback 은 선택된 요소(target element)의 visibility가 threshold에 설정된 값 만큼 도달했을 때 출됨 함수를 말한다. 이 함수는 2개의 인수를 가진다.

const testObserver = new IntersectionObserver((entries, observer) => {}, options)

이 두가지 인수에 대해 알아보자

Entries

entries : IntersectionObserverEntry 인스턴스의 배열이다. 이는 읽기전용의 속성들을 포함한다.

  const observer = useMemo(
    () =>
      new IntersectionObserver(([entry]) => console.log(entry), {
        threshold: [0.25, 0.5, 0.75],
      })
  );

boundingClientRect

관측 대상의 사각형 정보를 반환한다.

intersectionRect

관측 대상과 루트 요소와의 교차하는(겹치는) 영역에 대한 사각형 정보를 표시한다.

intersectionRatio

관측 대상이 루트 요소와 얼마나 교차하는(겹치는)지의 수치를 0.0과 1.0 사이의 숫자로 반환한다.

위의 두 영역(boundingClientRect, intersectionRect)의 비율을 의미한다.

isIntersecting

관측 대상이 루트 요소와 교차 상태로 들어가거나(true) 교차 상태에서 나가는지(false) 여부를 나타내는 값(Boolean)이다.

rootBounds

루트 요소에 대한 사각형 정보를 반환한다. rootMargin에 의해 값이 변경되며, 별도의 root를 설정하지 않을경우 null을 반환한다.

target

관측 대상(target Element)을 반환한다.

time

문서가 작성된 시간을 기준으로 교차 상태 변경이 발생한 시간을 나타낸다.

Observer

콜백이 실행되는 해당 인스턴스를 참조한다.

  useEffect(() => {
    observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  });

브라우저 지원 현황

Google Chrome: 51^
Microsoft Edge: 15^
Firefox: 55^
IE: (사망)
Opera: No Support
Safari: No Support

ref: heroPy,MDN API,MDN API2,Other Velog