intersection observer 이해하기

일단, intersection observer는 왜 사용할까?

1. 비동기적으로 콜백을 실행한다. 메인 thread에 영향을 주지 않고 callback을 실행할 수 있도록 한다.
2. 매번 layout을 새롭게 그려서 render tree를 새로 만들지 않고 callback을 실행한다. -> 일반적인 스크롤 이벤트 요소들의 교차를 감지하는 경우, 스크롤 이벤트가 발생할 때마다 모든 요소들의 위치를 계산하여 레이아웃을 다시 만들어야 하고, 그에 따라 렌더 트리도 새롭게 만들어야 한다. -> 일반적인 스크롤 이벤트로 교차를 확인하면 브라우저의 성능을 저하시킬 수 있다.

사용법

let observer = new IntersectionObserver(callback, options);

이렇게 intersection observer (겹치는지 감시하는 놈)을 만든다고 가정하자.

 

options에는 이런 옵션 객체가 들어간다.

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

• root: 대상의 가시성을 확인하기 위한 뷰포트로 사용되는 요소이다. 대상의 조상이어야만 하며, default로는 브라우저 뷰포트이다.
• rootMargin: 루트 주변의 마진값을 뜻하며, 겹쳤는지 계산하기 전에 root element의 bounding box를 늘리거나 줄이기 위해 사용한다.
• threshold: target의 가시성이 얼마나 될 때 observer의 콜백을 실행할지 지정하는 것이다.

let thresholdSets = [
    [],
    [0.5],
    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
    [0, 0.25, 0.5, 0.75, 1.0],
  ];
for (let i = 0; i <= 1.0; i += 0.01) {
  thresholdSets[0].push(i);
}

이런식으로 thresholdSets 배열을 통해 각각 저 값을 threshold로 가지는 옵저버 4개를 만든다고 가정하자.

thresholdSets[3]을 통해 만들어진 옵저버의 경우, intersectionRatio가 0, 0.25, 0.5, 0.75, 1일 때마다 콜백이 실행되는데,

 

let target = document.querySelector("#listItem");
observer.observe(target);

위에서 생성된 observer 객체에 target들을 구독하는 방식이다.

여태까지의 내용은 그냥 훑어봐도 이해가 쉽게 된다.

 

문제

mdn의 intersection observer api를 읽고 있는데, 이 부분이 이해가 가지 않았다..

const intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let elem = entry.target;

      if (entry.intersectionRatio >= 0.75) {
        intersectionCounter++;
      }
    }
  });
};

The callback receives a list of [IntersectionObserverEntry](<https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry>) objects and the observer

문서에는 이렇게만 적혀있었다.

그래서 entries가 뭔지 알아봐야했다.

 

entries는 구독 중인 동시에, 교차하고 있는 모든 요소들을 담은 배열이다.

자세한 내용은 다른 글로 분리했다..

https://hwangjiwon1.tistory.com/71 

intersection observer 진짜 마지막으로 이해하기

 

그 예시로, https://jsfiddle.net/jiwon22/sm2c1kuy/1/ 여기 들어가서 확인해볼 수 있다.

결론

챗 지피티가 내 시간을 엄청 잡아먹었다.

 

내가 이해하고 있던 내용이 맞았는데, 챗 지피티가 아니라고 해서 mdn 문서와 그 playground 들어가서 콘솔로그를 얼마나 찍었는지…

역시 콘솔로그는 강력하다.

다음에 이런 문제가 생겼을 때 어떻게 접근해야 빨리 궁금증을 해결할 수 있을지도 알았다.

이를 바탕으로 intersection observer + infinite scroll을 커스텀 훅으로 변경하는 부분도 작성할 것이다.