220418 Intersection Observer

❓ Intersection Observer

• Intersection Observer란
  • 타겟 요소와 타겟의 부모 혹은 상위 요소의 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 API
  • 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공

필요한 이유

• 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩 (Lazy Loading)
  • 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들을 추후에 로딩하게 하는 기술
  • infinite scrolling 과 placeholder가 Lazy Loading의 예시
• 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll 을 구현
• 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 때
• 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때

❗ 사용법

const observer = new IntersectionObserver (callback, options);
observer.observe(ele)

• new IntersectionObserver()를 통해 생성한 인스턴스(io)로 관찰자를 초기화하고 관찰할 대상(Element)를 지정

Callback: 관찰할 대상이 등록되거나 가시성(보이는지 안보이는지)에 변화가 생기면 관찰자는 콜백(Callback)을 실행

• Callback은 2개의 인수(entries, observer)를 갖는다

❓ entries

IntersectionObserverEntry 인스턴스의 배열
IntersectionObserverEntry는 읽기 전용의 다음 속성을 갖는다

• boundingClientRect: 관찰 대상의 사각형 정보
• intersectionRect: 관찰 대상의 교차한 영역 정보
• intersectionRatio: 관찰 대상의 교차한 영역 백분율
• isIntersecting: 관찰 대상의 교차 상태(Boolean, 주로 사용하는 속성)
• rootBounds: 지정한 루트 요소의 사각형 정보
• target: 관찰 대상 요소
• time: 변경이 발생한 시간 정보

❓ observer

• 콜백 함수가 호출되는 IntersectionObserver

❓ Options

options는 관찰이 시작되는 상황에 대해 옵션을 설정할 수 있다. defaultProps가 있으므로 필수는 아니다

• root
  • 타겟의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소 객체를 지정
  • 지정하지 않거나 null일 경우 브라우저의 뷰포트가 기본 사용
• rootMargin
  • 바깥 여백(Margin)을 이용해 Root 범위를 확장하거나 축소할 수 있다
  • CSS의 margin과 같이 4단계로 여백을 설정할 수 있으며, px 또는 %로 나타낼 수 있다
  • 기본값은 0px 0px 0px 0px이며 단위를 꼭 입력해야 한다
• threshold
  • observer의 콜백이 실행될 대상의 가시성 %를 나타내는 단일숫자, 배열
  • 기본값은 0이며, 1.0은 요소의 모든 픽셀이 화면에 노출되기 전에는 콜백시키지 않음을 의미
  • 만약 50% 만큼의 요소가 보여졌을 때를 탐지하고 싶다면 0.5로 설정해주면 된다

Methods

• IntersectionObserver.observe(target) : 관찰 시작
• IntersectionObserver.unobserve(target) : 관찰 종료
• IntersectionObserver.disconnect(target) : 모든 요소 관찰 멈추기

출처

• https://velog.io/@holicholicpop/5-.-Intersection-Observer
• https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
• https://velog.io/@meganatc7/Intersection-Observer-%EB%9E%80