Intersection Observer API란 ?
브라우저에서 제공하는 API이며,
기본적으로 관찰할 요소를 지정하고, 대상 요소의 상위 또는 최상위 요소의 교차점을 비동기적으로 관찰합니다.
대상 요소가 뷰포트에 진입하거나 뷰포트에서 벗어날 때 이를 감지합니다.
이때 뷰포트란 사용자 화면에 실제로 보이는 부분을 말하며,
화면에 보이는 부분과 지정한 요소의 교차점을 관찰합니다.
그럼 간단한 코드를 통해 대상 요소를 감지하여 동작하는 코드를 작성해보겠습니다.
대상 요소가 감지됐을 때 count를 1씩 증가하고, 대상 요소에 텍스트를 추가해보겠습니다.
위 코드를 간단히 설명하면,
const observer = new InterSectionObserver()
InterSectionObserver 인스턴스를 observer 라는 변수에 담았습니다.
useEffect 내부에 있고, 의존성 배열이 빈배열로 되어있으니 최초 컴포넌트가 마운트될 때 한번만 인스턴스를 만들게 되고, 리렌더가 일어난다해도 observer를 다시 만들지 않을 것입니다.
InterSectionObserver() 안에 들어간 콜백함수를 보겠습니다.
(entries) => {
entries.forEach((entry)=>{
if(entry.isIntersecting) {
console.log((count +=1))
}
})
}처음에 대상 요소가 뷰포트에 진입 / 벗어날 때 감지한다고 했습니다.
그러나 위 코드를 보면 entry.isIntersecting 의 대한 값이 참일 경우,
count 를 1 증가시키고 있습니다.
이 부분은 밑에서 다시 설명하겠습니다.
new InterSectionObserver() 을 사용하게 되면 첫번째 인자로 콜백함수가 들어오게 됩니다.
대상 요소를 지정하게 되면 entries에 객체로 이루어진 배열형태로 들어오게 됩니다. 그로 인해 forEach로 하나씩 순회하면서 해당 객체가 가지고 있는 isIntersecting 속성의 값을 if문의 조건으로 사용하고 있습니다.
isIntersecting 속성은 관찰할 요소가 상위 또는 최상위 요소의 뷰포트에 진입 또는 벗어났는지에 대한 감지를 통해 true, false 값을 반환하게 됩니다.
해당 화면을 보겠습니다. header 영역과 Hi 영역으로 이루어져있고,
여기서의 대상요소는 Hi 영역이고 threshold 의 값을 0.5로 사용했기 때문에 뷰포트에 대상요소가 50% 들어오게 됐을 때, 진입을 감지하게 되고 if문이 실행되게 되는 것입니다.
위에서 진입 또는 벗어날 시에 감지한다고 했습니다.
여기서 isIntersecting 의 값이 진입 시 true / 벗어날 시 false 를 반환하기 때문에 제가 작성한 코드처럼 true 일 때 if문이 실행되게 된다는 것은 다시 말해 진입 시에만 count 증가를 기대한 것이라 볼 수 있습니다.
그럼 콘솔을 통해 진입 시 count가 증가함을 확인해보겠습니다.
height가 800px인 hi 영역이 반 정도 보이자 if문이 실행됐고, 내부 콘솔이 동작했습니다.
주의할 점
무한 스크롤을 사용할 때, 접하다보니 intersectionObserver = 무한 스크롤 이라고 혼동할 수 있는데 단지 교차점을 확인해주는 API 일 뿐 그로 인한 동작은 별개라고 할 수 있습니다.
