[REACT] Intersection Observer

■ Intersection Observer란?

IntersectionObserver는 DOM 엘리먼트가 뷰포트상에 노출되었는지 여부를 비동기적으로 감시하는 API이다.

이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다.

 

• 페이지 스크롤에 따른 이미지/콘텐츠의 레이지 로딩 구현
• 무한 스크롤 웹사이트 구현
• 광고 수익 측정을 위한 광고 문구 노출 여부 계산
• 사용자가 결과를 볼지 유무에 따라 애니메이션 또는 작업 실행 여부 결정

 

 

이미지 레이지 로딩?

2021.09.07 - [TIL] - [TIL] 20210907 intersection observer lazy loading

 

 

■ 기존의 이미지/콘텐츠 레이지 로딩 구현 방법

기존에는 대상 이미지 또는 엘리먼트가 뷰포트 내에 존재하는지 유무를 판별하기 위해 element.getBoundingClientRect 함수를 이용했다.

이 함수는 때때로 유용하지만, 성능적 이슈가 발생한다.

element.getBoundingClientRect가 호출되면 브라우저는 해당 엘리먼트의 크기와 위치값을 계산한다.

그리고 이 과정에서 reflow가 발생하게 된다.

 

reflow란?

어떠한 액션이나 이벤트에 의해 DOM 요소의 크기나 위치 등을 변경하면 해당 노드의
하위 노드와 상위의 노드들을 포함하여 Layout 단계를 다시 수행하게 된다. 즉 변경하려는 특정
요소의 위치와 크기 뿐만 아니라 연관된 요소들의 위치와 크기도 재계산을 하기 때문에
브라우저의 퍼포먼스를 저하시키는 요인이다.

 

간헐적인 사용이라면 크게 무리가 되지 않지만 아래 예제와 같이 scroll 이벤트와 함께 사용될 경우 메인 스레드가 과부하 될 수 있다.

또한, iframe를 사용 할 때, 부모 창의 도메인이 iframe 내부의 도메인과 다를 경우 부모 창의로의 접근이 허용되지 않아 iframe 자체적으로 동적 로딩 기능을 구현 할 수 없었다.

 

출처: https://armadillo-dev.github.io/javascript/what-is-intersection-observer/

[Javascript] IntersectionObserver API 설명과 사용 방법

 

 

 

 

■ Intersection Observer의 사용

https://www.npmjs.com/package/react-intersection-observer

react-intersection-observer