1. Intersection Observer API란?

관찰하고자 하는 엘리먼트와 조상 엘리먼트 또는 viewport 간의 교차(intersection)의 변화를 비동기적으로 감지하는 방법

⇒ 엘리먼트가 viewport에서 또는 다른 엘리먼트와의 관계에서 보이는지 안보이는지를 쉽게 알 수 있도록 기능을 제공하는 역할을 하는 웹 API이다. (간단히 말해서 특정 엘리먼트가 화면에 보이는지 감시하는 것)

(지켜보고있다..)

2. Intersection Observer API는 어느 경우에 쓰이는가?

• Lazy-loading (지연 로딩)
• Infinite scrolling (무한 스크롤)

등등 여러 기능들을 구현할 때 쓰인다.

3. Intersection Observer API 사용 예시

객체 생성

const observer = new IntersectionObserver(callback,options)

callback

// 첫번째 parameter entries : element 배열
// 두번째 parameter observer : 자기 자신 
const callback = (entries,observer) => {
  entries.forEach((entry) => {
   if(entry.isIntersecting){
     console.log('화면에 보임')
   }
   else{
     console.log('화면에서 보이지 않음')
   }
  })
}