https://unsplash.com/photos/42t-DKecmPk
TOC
1.IntersectionObserver란 무엇인가.
2.마음을 열고 이해해보자.
1. IntersectionObserver란 무엇인가.
정식 API이며 web상에서 viewport를 기준으로 observer기능을 담당한다.
즉 현재 클라이언트가 바라보고 있는 화면을 기준으로 화면에 얼마정도 보여지고 있는지를 가지고 특정 콜백 함수를 실행시켜주는 역할을 한다.
비슷하게는 eventListener가 이벤트의 발생을 기다리는 것과 비슷하다.
하지만 메인스레드에서 부하를 과하게 주는 scrollevent 같은 경우 scroll이 한번 발생할 때마다 리렌더링을 요구하기 때문에 성능 이슈가 발생할 수 있게 된다.
반면 observer는 vp에 특정 element가 들어왔는지를 검사해 콜백함수를 실행하므로 값이 싸면서도 같은 동작을 해주므로 성능 향상에 도움이 될 것이다.
물론 모든 것을 대체하기는 쉽지 않다. scroll을 감지해야 하는 것도 분명 있으리라
2. 마음을 열고 이해해보자
const options = {
rootMargin: "25px",
threshold: 1.0
};
const io = new IntersectionObserver((entries,observer) => {
entries.forEach((entry) => {
console.log(entry);
if (entry.isIntersecting) {
console.log(entry.isIntersecting);
// io.unobserve(entry.target);
} else console.log(entry.isIntersecting);
});
}, options);
io.observe(document.querySelector("div"));
위 코드를 예로 들면
-
io는 observer객체를 생성한다.
-
observer 객체는 두 개의 인자를 가진다. => [0] entries, [1] observer
-
[0] entries는 observing하는 DOM elements를 가리키면서(target) vp에 어느정도 접근해야 callback 함수를 실행할지를 자세히 정할 수 있는 method를 가진다.
(!!!) entries = 배열 -
[1] observer는 현재 콜백이 실행되는 해당 객체의 인스턴스를 참조합니다. (인스턴스는 class의 복제본을 말합니다.)
-
io.observe(elements)는 io로 생성한 observer객체가 해당 elements를 observing하기 시작한다는 뜻입니다.
-
io.unobserve(elements)는 observing을 종료한다는 뜻입니다.
위 예제 코드는 스크롤 이벤트 대신 vp에 특정 div가 들어왔을 때 특정 이벤트를 발생시킵니다.
이를 활용하여 무한 스크롤을 만들어 볼 수 있겠죠
