[Web API] Intersection Observer API에 대해 간단히 알아보자. (feat. 무한 스크롤)

무한 스크롤에 대해 공부하던 중, 이를 구현하기 위해 많이 사용되는 Intersection Observer에 대해 궁금해졌고, 간단한 개념과 사용 방법에 대해 정리한 글이다.

 

Intersection Observer는 Web API로, 브라우저에서 작동하는 자바스크립트의 API다.

 

웹 기술이 발전함에 따라 로딩되는 요소가 비대해지면서 처음부터 모든 요소를 로드하지 않고, 스크롤할 때 다음 요소를 불러오게끔 구현함으로써 초기 렌더 속도를 향상시키는 등의 기법이 많이 사용되게 되었다. 그 밖에도 사용자가 보는 영역의 변화에 따라 특정한 작업이나 애니메이션을 넣어주고 싶은 경우, 이를 감지하는 무언가가 필요한데 Intersection Observer는 이를 쉽게 구현하기 위한 API다.

 

MDN 문서에서는 다음과 같이 설명하고 있다.

Intersection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공합니다.
- https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API, MDN Web Docs

 

viewport는 사용자가 보고 있는 문서의 영역, '비동기적'으로 관찰한다는 것은 매 스크롤마다 바로 바로 교차 여부를 계산하는 것이 아닌, 레이아웃 계산이나 페인팅 등 브라우저의 렌더링 파이프라인과 동기적으로 묶이지 않고, 브라우저가 여유를 가질 때, 백그라운드에서 관찰 여부를 계산한다는 것을 의미한다. Intersection Oberserver API는 계산 결과를 콜백으로 전달하는데, 스크롤할 때마다 즉시 실행되지 않고 브라우저가 성능 저하가 없는 시점에 전달해준다.

 

쉽게 말하면 특정 요소가 사용자의 직사각형 브라우저 영역과 다른 요소가 교차하는지 여부를 '관찰하는(observe)' 데 사용하는 API다.

 

예제 코드를 통해 간단한 선언 및 사용 방법을 알아보자.

 

 

`IntersectionObserver`는 생성하기 위해 파라미터로 `(callback, options)`를 받는다. `options` 객체의 `root`는 뷰포트로 사용되는 요소다. 이는 반드시 타겟의 상위 요소여야 한다. 지정하지 않거나 `null`이면 브라우저 뷰포트가 기본으로 설정된다. `threshold`는 콜백이 무조건 실행되어야 하는 가시성 백분율을 나타낸다. 만약 50% 이상 보이는 경우를 감지하고싶다면 0.5를 지정하면 된다.

 

`callback`은 `(entries, observer)`를 파라미터로 받는다. `entry`는 관찰된 하나의 교차 변화 상태를 담고 있는 객체다. `observer`는 지금 콜백을 실행하는 관찰자 객체 즉, `IntersectionObserver`를 가리킨다.

let callback = (entries, observer) => {
  entries.forEach((entry) => {
    // 각 엔트리는 관찰된 하나의 교차 변화을 설명합니다.
    // 대상 요소:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

`entry.isIntersecting`을 사용하면 특정 요소와 교차할 때 데이터를 로드하는 로직을 쉽게 구현할 수 있다. 이를 응용하면 간단한 무한 스크롤 로직을 아래와 같이 구현할 수 있다.