Intersection Observer

Intersection Observer 

Intersection Observer API는 브라우저에서 제공하는 api이다. 
우리가 지정한 요소와, viewport 또는 그 요소의 부모가 겹치는 영역이 어떻게 변하는지 비동기적으로 관찰할 수 있다.  
예를 들어, 카드 리스트의 마지막 아이템이 viewport에 보이면(아이템과 viewport가 겹치기 시작하면), 새로운 리스트 아이템 정보를 요청할 수 있다. => infinite scroll 

 

intersection observer

how to create intersection observer? 

const options = {
  root: null, 
  rootMargin: '0px',
  threshold: 1.0 
}

const observer = new IntersectionObserver(callback, options);

const callback = (entries, observer) => { // ([entry], observer)
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.intersectionRatio
    //   entry.isIntersecting
    //   entry.target... 
  });
};

observer.observe(targetElement);

 

1. IntersectionObserver(관찰자) 클래스를 생성하기 위해, callback과 option을 전달한다.
2. root | 우리가 관찰할 target 요소의 부모를 지정할 수 있다. null을 전달하면 viewport가 할당된다. 
3. threshold | target 요소가 부모 요소와 겹치는 정도를 말하며, 0은 겹치기 시작할 때, 1은 완전히 겹쳤을 때를 말한다. 
4. callback | target과 부모 요소가 threshold에 지정된 비율만큼 겹쳤을 때 callback 함수를 실행한다.
5.  entries 
   1. target element와, 부모 요소가 교차하고 있는 섹션에 대해 설명하는 배열 데이터이다.
   2. 예를 들어 isIntersecting은 두 요소가 교차하고 있는지, 아닌지를 boolean으로 반환한다. 
   3. 하나의 요소만을 관찰할 때에는 주로 entries를 구조분해한 [entry]를 사용한다. 

how to use intersection observer with react?