728x90
InterSection Observer이란?
기본적으로 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 안되는지 구별하는 기능이다.
쉽게 말해, 사용자 화면에 지금 보이는 요소인지 아닌지 구별하는 기능이다.
해당 기능은 비동기적으로 실행되어, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 문제 없이 사용이 가능하다.
무한스크롤을 구현하면서 react-query의 useInfiniteQuery를 이용하였고,
해당 부분의 데이터 관찰은 react-intersection-observer api를 이용하였다.
해당 라이브러리를 이용하여 무한스크롤 구현은 해당 블로그에 작성하였으니 참고하면 좋을 것 같다.
자바스크립트 내장함수인 IntersectionObserver()를 통해 인스턴스를 생성하여, 관찰자를 초기화하고, 관찰할 대상을 지정해주어야한다.
const io = new IntersectionObserver(callback, options) // 관찰자 초기화
io.observe(element) // 관찰할 대상(요소) 등록
callback
관찰할 대상이 등록되거나 가시성에 변화가 생기면, 관찰자는 콜백함수를 실행한다.
ex) 무한스크롤 구현시 마지막 데이터를 보면, 다음 페이지를 불러오는 함수 실행
const io = new IntersectionObserver((entries, observer) => {}, options)
io.observe(element)
entries
entries는 IntersectioObserverEntry 인스턴스의 배열이다.
IntersectionObserverEntry는 읽기 전용의 다음 속성을 포함한다.
boundingClientRect: 관찰 대상의 사각형 정보(DOMRectReadOnly)
intersectionRect: 관찰 대상의 교차한 영역 정보(DOMRectReadOnly)
intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)
isIntersecting: 관찰 대상의 교차 상태(Boolean)
rootBounds: 지정한 루트 요소의 사각형 정보(DOMRectReadOnly)
target: 관찰 대상 요소(Element)
time: 변경이 발생한 시간 정보(DOMHighResTimeStamp)
const observerTargetEl = useRef<HTMLDivElement>(null);
if (!observerTargetEl.current || !hasNextPage) return;
const io = new IntersectionObserver((entries, observer) => {
if (entries[0].isIntersecting) {
fetchNextPage();
}
});
io.observe(observerTargetEl.current);
return () => {
io.disconnect();
};
}, [hasNextPage]);
...
return (
...
{hasNextPage && <div ref={observerTargetEl} />}
...
)
해당 코드를 통해 intersection observer를 직접 구현하였다.
참고문서
728x90