[JS] IntersectionObserver API란?

IntersectionObserver API는 스크롤이나 뷰포트 변화를 감지해 특정 요소가 뷰포트에 진입하거나 떠날 때 콜백 함수를 실행하게 해주는 API입니다. 이를 통해 이미지 지연 로딩, 무한 스크롤, 애니메이션 활성화 등을 효율적으로 처리할 수 있습니다.

 

목차

1. IntersectionObserver 기본 사용법

2. IntersectionObserver 옵션

3. 주의할 점

4. IntersectionObserver 적용 예시

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. IntersectionObserver 기본 사용법

IntersectionObserver는 크게 두 단계로 구성됩니다. 첫 번째로 IntersectionObserver 객체를 생성하고, 두 번째로 해당 객체로 관찰할 요소를 등록합니다.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 요소가 뷰포트에 나타난 경우 처리할 작업
      console.log("Element is in view!");
      observer.unobserve(entry.target); // 일회성 작업이라면 관찰 중지
    }
  });
});

// 관찰할 요소 등록
const targetElement = document.querySelector(".target");
observer.observe(targetElement);

 

2. IntersectionObserver 옵션

IntersectionObserver 생성 시, threshold, root, rootMargin 세 가지 옵션을 설정할 수 있습니다:

• root: 관찰 기준이 되는 요소입니다. 지정하지 않으면 기본 뷰포트를 사용합니다.
• rootMargin: 관찰 기준 요소의 마진을 설정합니다. "0px 0px 0px 0px" 형식으로 상, 우, 하, 좌 마진을 설정할 수 있습니다.
• threshold: 요소가 얼마나 뷰포트에 보일 때 콜백을 실행할지 결정합니다. 예를 들어, 0.5로 설정하면 요소가 50% 나타날 때 콜백이 호출됩니다.

const observerOptions = {
  root: null,           // 뷰포트를 기준으로 감지
  rootMargin: "0px",
  threshold: 0.5,       // 요소가 50% 보일 때 콜백 실행
};
const observer = new IntersectionObserver(callbackFunction, observerOptions);

 

3. 주의할 점

 

• 메모리 관리: 요소가 더 이상 필요하지 않을 때는 unobserve() 메서드로 관찰을 해제하세요.
• 브라우저 지원: IntersectionObserver는 최신 브라우저에서 지원되며, 구형 브라우저에서는 폴리필을 사용해야 합니다.

 

4. IntersectionObserver 적용 예시

IntersectionObserver는 스크롤될 때마다 이미지를 로드하는 지연 로딩에 자주 사용됩니다. 스크롤 시 이미지 로딩을 진행하면, 불필요한 리소스 낭비를 줄일 수 있습니다.

const lazyImages = document.querySelectorAll(".lazy");

lazyImages.forEach(image => {
  observer.observe(image);
});

 

위 예제에서는 lazy 클래스가 있는 모든 이미지를 관찰하고, 뷰포트에 들어왔을 때 실제 이미지를 로드하게 할 수 있습니다.

 

 

 

[JS] Throttle과 Debounce

 

[React] 리액트 useMemo (성능 최적화)