간단히 시작하기

Intersection Observer API - Web API | MDN

Intersection Observer API의 사용법과 활용방법

React 무한 스크롤 구현하기 with Intersection Observer

Intersection Observer API는 말 그대로 교차 관찰자 API로 교차되는 것을 관찰하여 API가 동작하도록 하는 방식

타겟 Element와 상위 요소 또는 최상위 Document의 Viewport 사이가 교차할 때의 변화를 비동기적으로 관찰한다.

2016년 구글 개발자 Page를 통해 소개되었고 크롬 51버전부터 사용 가능한 Web API로 아래와 같은 상황에서 사용이 가능

<aside> 💡 Intersection Observer의 필요성

• 페이지 스크롤 시 이미지 Lazy-loading (지연 로딩)
• Infinite Scrolling(무한 스크롤)을 통해 스크롤 시 새로운 컨텐츠를 불러올 때
• 광고 수익 계산을 위한 광고 가시성 참고 시
• 사용자가 결과를 볼지에 대한 애니메이션 동작 여부 결정 시

</aside>

기존 Scroll 이벤트 방식과 문제점

• 기존 방식
  • 특정 위치 도달 시 addEventListener의 Scroll 이벤트 +
  • 특정 지점 관찰을 위해 getBoundingClientRect 함수 사용
• 문제점
  • 짧은 시간 수백 ~ 수천 번 호출 되며 동기적 실행되므로 메인 Thread에 영향
  • 여러 Element에 이벤트 등록되어 있으므로 스크롤 시마다 이벤트 끊임없이 호출
    • 이를 개선하려면 ? Debouncing 과 Throttling을 사용!
  • getBoundingClientRect 함수의 reflow(리플로우) 현상 발생
    • Reflow ? 브라우저가 웹 페이지 일부 또는 전체를 다시 그려야 하는 경우 사용되는 것
    • Reflow 발생 시 퍼포먼스 이슈가 발생
    • 실제 F12 - 성능 부분에서 Reflow 현상 발생 확인 가능
• 사용 예시

Intersection Observer 사용 방법

이벤트를 등록하고자 하는 Target Element가 화면 노출되었는지 여부를 구독할 수 있는 API