[Javascript] Intersection Observer란?

Intersection Observer API는 웹 개발에서 요소가 뷰포트(viewport)나 특정 다른 요소와 교차하는지 여부를 비동기적으로 관찰하는 방법을 제공합니다. 이 기능은 스크롤 이벤트 리스너를 사용한 기존의 방법에 비해 성능이 뛰어나며, 특히 지연 로딩(lazy loading) 이미지, 무한 스크롤 구현, 광고 추적 등 다양한 용도로 활용됩니다.

기본 사용법

1. Observer 생성: IntersectionObserver의 새 인스턴스를 생성합니다. 이때, 콜백 함수와 옵션 객체를 전달할 수 있습니다.
2. 관찰 대상 요소 지정: 생성한 observer를 사용하여 관찰하고 싶은 요소들을 지정합니다.

사용 예시

// 콜백 함수 정의: 교차 상태 변경 시 실행됩니다.
let observerCallback = (entries, observer) => {
  entries.forEach(entry => {
    // 교차 상태에 따라 작업을 수행
    if (entry.isIntersecting) {
      // 예: 이미지 지연 로딩
      entry.target.src = entry.target.dataset.src;
    }
  });
};

// 옵션 객체: 교차를 판단할 때 사용할 옵션들을 지정
let options = {
  root: null, // null일 경우 브라우저 뷰포트를 기준으로 사용
  rootMargin: '0px',
  threshold: 1.0 // 타겟 요소가 100% 보이기 시작할 때 콜백이 실행
};

// IntersectionObserver 인스턴스 생성
let observer = new IntersectionObserver(observerCallback, options);

// 관찰할 대상 요소 지정
document.querySelectorAll('img.lazyload').forEach(img => {
  observer.observe(img);
});

주의사항

• 성능 최적화: 관찰자(observer)는 가능한 한 최소한의 요소에만 적용하고, 더 이상 필요 없는 관찰 대상은 observer.unobserve()를 호출하여 관찰을 중단시키는 것이 좋습니다.
• threshold 값 설정: threshold 옵션은 얼마나 많은 부분이 교차되었을 때 콜백을 실행할지 결정합니다. 배열을 통해 다양한 임계값을 설정할 수 있으며, 이는 세밀한 교차 처리를 가능하게 합니다.
• 브라우저 호환성: 모든 브라우저가 Intersection Observer API를 지원하지 않으므로, 폴리필(polyfill)을 사용하여 호환성을 보장할 수 있습니다.

의존성 설정 방법

Intersection Observer의 경우, "의존성 설정"이라는 개념보다는 관찰할 요소들을 observe 메서드를 통해 등록하는 과정이 중요합니다. 관찰 대상 요소나 옵션이 변경되면, 관찰자를 새로 생성하거나, 새로운 요소에 대해 observe 메서드를 호출하여 관찰 대상을 업데이트해야 합니다.

결론

Intersection Observer는 현대 웹 개발에서 꼭 필요한 API 중 하나로, 성능 저하 없이 요소의 교차 상태를 효율적으로 관찰할 수 있게 해줍니다. 사용법을 숙지하고 올바르게 적용한다면, 사용자 경험을 크게 향상시키는 다양한 기능을 구현할 수 있습니다.