Intersection Observer
Intersection Observer API(교차 관찰자 API)
크롬 51버전부터 사용할 수 있는 이 Web API는 2016년 4월 구글 개발자 페이지 통해 소개되었습니다. MDN을 비롯해서 Intersection Observer를 어떻게 활용할 수 있을지 살펴보니 생각보다 다양한 곳에 적용할 수 있고, 앞으로 유용하게 쓸 수 있을 것 같습니다. MDN에서는 Intersection Observer의 필요성을 아래와 같은 예를 들어 설명하고 있습니다.
- 페이지 스크롤 시 이미지를 Lazy-loading(지연 로딩)할 때
- Infinite scrolling(무한 스크롤)을 통해 스크롤할 때 새로운 콘텐츠를 불러올 때
- 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 때
- 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때
Intersection Observer API의 등장
비동기적으로 실행되기 때문에 메인 스레드에 영향을 주지 않으면서 변경 사항을 관찰할 수 있습니다. 또한 IntersectionObserverEntry의 속성을 활용하면 getBoundingClientRect()를 호출한 것과 같은 결과를 알 수 있기 때문에 따로 getBoundingClientRect() 함수를 호출할 필요가 없어 리플로우 현상을 방지할 수 있습니다.
Intersection Observer 사용 방법
Intersection Observer의 사용법에 대해 알아보겠습니다. MDN에서는 IntersectionObserver를 아래와 같이 정의하고 있습니다.
The 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는 타겟 엘리먼트가 조상 엘리먼트, 또는 최상위 문서의 뷰포트(브라우저에서는 보통 브라우저의 viewport)의 교차영역에서 발생하는 변화를 비동기로 관찰하는 방법을 제공합니다.
기본 사용 방법은 아래와 같습니다. 여러 엘리먼트에 이벤트를 한 번에 등록하고 싶다면 콜백함수에 forEach를 사용해서 선언할 수 있습니다. IntersectionObserver를 생성하기 위해서는 교차되었을 때 실행할 callback함수를 등록해야 하고, 선택적으로 options 값을 넘겨줄 수 있습니다.
const io = new IntersectionObserver(callback[, options])
io.observe(element)new IntersectionObserver()를 통해 생성한 인스턴스(io)로 관찰자를 초기화하고 관찰할 대상(Element)를 지정한다.
왜 사용할까?
1. 호출 수 제한 방법으로 debounce, throttle을 사용하지 않아도 된다.
스크롤 이벤트를 달게 되면 굉장히 많은 호출이 일어나게 된다.
window.addEventListener('scroll', function() {
return console.log('scroll!');
}이렇게 하면 엄청 많은 콘솔로그가 찍히는 걸 확인해 볼 수 있다.
이를 컨트롤 하기 위해서 debounce, throttle 기법을 사용하는데,
Intersection Observer를 사용하면 훨씬 간편하게 해결할 수 있다.
2. reflow를 하지 않는다.
스크롤 이벤트에서는 현재의 높이 값을 알기 위해 offsetTop을 사용하는데 정확한 값을 가져오기 위해 매번 layout을 새로 그리게 된다고 한다.
