[WebAPI] IntersectionObserver란?

 

IntersectionObserver - Web API | MDN

 

 

IntersectionObserver는 특정 요소가 뷰포트(또는 부모 요소) 내에서 보이는지 여부를 비동기적으로 감지하기 위해 사용되는 API. 스크롤 이벤트를 직접 핸들링하지 않고도 요소의 가시성을 감지할 수 있다. 특히, 무한 스크롤 기능을 구현할 때 매우 유용함.

IntersectionObserver를 사용하는 이유

1. 성능 향상:
   • 스크롤 이벤트를 직접 감지하는 대신, IntersectionObserver를 사용하면 브라우저가 더 효율적으로 요소의 가시성을 감지할 수 있다. 스크롤 이벤트 핸들러는 자주 호출되므로, 이를 줄이면 성능을 향상시킬 수 있다.
2. 비동기적 관찰:
   • IntersectionObserver는 비동기적으로 동작해, 특정 요소가 뷰포트에 들어오거나 나갈 때 콜백을 실행함. 이는 스크롤 이벤트와 달리 이벤트 루프를 차단하지 않아 더 부드러운 사용자 경험을 제공함.
3. 간편한 사용:
   • 특정 요소가 보이기 시작할 때/보이지 않게 될 때를 쉽게 감지할 수 있다. 이를 통해 무한 스크롤, 이미지 지연 로딩, 애니메이션 트리거 등 다양한 기능을 쉽게 구현할 수 있다.

IntersectionObserver의 장점

1. 스크롤 이벤트의 효율적 관리:
   • 스크롤 이벤트는 빈번하게 발생할 수 있으므로 이를 모두 처리하는 것은 성능에 영향을 줌. IntersectionObserver는 빈번한 스크롤 이벤트를 효율적으로 처리할 수 있게 도와줌.
2. 비동기 처리:
   • IntersectionObserver는 비동기적으로 동작하므로, 주 스레드의 부하를 줄여주고, 부드러운 사용자 경험을 제공함.
3. 다양한 사용 사례:
   • 무한 스크롤 외에도 이미지 지연 로딩, 애니메이션 트리거, 광고 노출 감지 등 다양한 상황에서 유용하게 사용할 수 있음.