Intersection Observer

개요

유튜브 클린코딩 과제를 하다가 인피니티 스크롤을 구현하게 되었다.
무한스크롤에는 구현방법이 크게 2가지가 있다.
스크롤 이벤트를 넣어서 실시간으로 좌표값을 가져와서 바닥에 닿았을때
불러오게 하는것.

하지만 이방법은 스크롤을 할때마다 이벤트를 호출하기때문에
성능저하가 심하다
물론 그 방안으로 throttling 이 있지만
오늘은 Intersection Obervser 에 대해서만 다루려고 한다.

Intersection Obervser 이게 뭐지?

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

mdn 문서에 따르면
Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.

[ viewport - 브라우저에서 보이는 화면 범위 ]

이게 무슨말인가 즉

그림이 시원치 않지만
해당 그림처럼 view port가 intersection부분에 들어갔을데 감지를 하게 하는 api이다.

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

let observer = new IntersectionObserver(callback, options);

위와 같은 코드로 Intersection Obervser를 생성 할 수 있게되는데.

options에는

• root는 내가 원하는 dom의 범위를 viewport로 잡을수있다
  이걸 document 전체로 잡으면 브라우저 화면 내에 전체가 viewport고
  특정 modal로 잡으면 해당 modal의 크기가 viewport의 크기가 된다.

• rootMargin은 root에서 결정한 dom의 크기에서
  원하는 길이만큼 viewport의 넓이를 크게 하거나 줄일수있다
  양수이면 해당크기만큼 viewport가 넓어지고
  음수면 해당크기만 viewport가 줄어든다. 위의 그림과 같다.

thershold수치는 viewport와 원하는 intersection이 얼마나 겹쳤을때
obesrver가 실행할건지를 정하는것이다.
0이면 아주조금이라도 intersection이 들어오면 실행이고
1이면 interseciont의 마지막부분까지 들어오면 observer가 실행되는것이다.

참고로 Intersection Obervser 생성하고 원하는 intersectio에 걸면
처음 한번은 바로 실행이 되더라 - 잘못된 정보일수있음

Intersection Obervser을 그래서 어떻게 사용하는데?

let options = {
    root: document.querySelector(".youtube-search-modal__inner"),
    rootMargin: "0px",
    threshold: 0.8,
  };
  
 let io = new IntersectionObserver((entries, observer) => {
    if (entries[0].isIntersecting) {
      renderYoutubeClip(videoData);
    }
  }, options);

  io.observe(clips[clips.length - 1]);

난 위와 같이 사용했는데 내가원하는 옵션대로 설정하고
Intersection Obervser을 생성하고
viewport가 어느 dom에 들어갔을때 실행하고 싶은지를 설정하면되는데
그게 intersection이다 위에는 나는 clips의 마지막 clip에 viewport가 들어가면
실행하고싶었다.

callback의 entries, observer 인수

callback은 observer가 발생했을때 실행하는 함수인데

callback= (entries, observer) => {
    if (entries[0].isIntersecting) {
      //원하는 함수들
    }    
 let io = new IntersectionObserver(callback, options);

위와 같은 형식으로 구성된다.
그리고

callback실행 되면 etriesd와 observer라는 매개변수를 받게되는데.

entries는 interscion에 대한 인수고
observer 는 내가 root로 설정한 viewport의 대한 인수들이다 자세한건
https://heropy.blog/2019/10/27/intersection-observer/
요기로 가면 잘 설명해주셨더라

--두서가 없었지만 일단 지정도로

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
https://heropy.blog/2019/10/27/intersection-observer/
http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
https://pks2974.medium.com/intersection-observer-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-fc24789799a3