Scroll Event와 Intersection Observer API
스크롤 이벤트는 단시간에 많은 요청을 호출하고 동기적으로 수행되기 때문에 메인 스레드에 악영향을 미칠 수 준다. 또한 여러개의 스크롤 이벤트가 등록되어 있을 경우에는 끊임없이 이벤트가 발생하여 브라우저 퍼포먼스가 떨어지는 현상이 발생한다. 또한 offsetTop 이나 getClientRects() 과 같은 기능을 사용했을 경우에는 reflow 현상을 발생시킬 수 있다.
[리플로우]
Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 하는 것.Intersection Observer API는 비동기적으로 실행하기 때문에 메인 스레드에 영향을 끼치지 않으면서 변경할 수 있다. IntersectionObserverEntry 속성을 사용하면 getClientRects() 와 같은 결과를 확인할 수 있기 때문에 리플로우 현상을 방지할 수 있다.
[getClientRects]
엘리먼트를 감싸고 있는 박스들의 크기를 가져온다.단점은 IE를 지원하지 않는다. (polyfill을 사용하면 사용할 수 있다.)
Intersection Observer API 사용 방법
관찰자 초기화
const observer = new IntersectionObserver(callback,options); // 관찰자를 초기화한다.관찰자 등록 및 중지
observer.observe(element); // 관찰할 대상을 등록한다.
observer.unobserve(element); // 대상에 대한 관찰을 중지한다.
observer.disconnect(); // observer가 관찰하는 모든 요소들에 대한 관찰을 중지한다.callback
const observer = new IntersectionObserber((entries,observer) => {},options);콜백은 entries와 observer 인자를 가진다.
entries
**IntersectionObserverEntry** 인스턴스의 **배열이며 읽기 전용이다. 아래와 같은 속성들을 가진다.** boundingClientRect : 대상 요소의 사각형 정보
intersectionRatio : 0과 1 사이의 값으로 루트와의 교차 비율. ( 1은 완전히 겹친 상태 )
intersectionRect : 루트의 사각형 내에서 현재 표시되는 대상 요소의 교차 영역 정보
isIntersecting : 타겟 요소가 교차 상태인지 알려주는 boolean값
rootBounds : 루트 요소의 사각형 정보
target : 대상 요소의 정보
time : 교차 변경이 발생한 시간 정보 ( 밀리세컨드 )
options
root
대상 요소가 보여지는 정도를 결정하기 위해 사용되는 객체.
디폴트는 null이며 지정하지 않을 시에는 뷰포트가 사용된다.
const observer = new IntersectionObserver(callback, {
root: rootRef?.current
})rootMargin
margin 을 통해 root의 범위를 조절할 수 있다. 단위를 반드시 입력해야한다.
const observer = new IntersectionObserver(callback, {
root:rootRef?.current
rootMargin: '0px 0px 20px 0px'
})threshold
타켓이 루트와 얼마만큼의 비율로 겹쳐졌을 때 obeserver를 실행시킬지를 결정하는 배열 혹은 단일값
0 ~ 1의 값을 가진다.
const observer = new IntersectionObserver(callback, {
threshold:1 or threshold[0, 0.5, 1];
})