Intersection Observer APIIntersection Observer API

// Observer 생성
const observer = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log(entry.target, '가 보입니다!');
        console.log('교차 비율:', entry.intersectionRatio);
      }
    });
  },
  {
    root: null,           // null = 뷰포트
    rootMargin: '0px',    // 마진 (CSS처럼)
    threshold: [0, 0.25, 0.5, 0.75, 1.0],  // 교차 비율 트리거 지점
  }
);

// 요소 관찰
observer.observe(document.querySelector('.target'));

// 관찰 중지
observer.unobserve(element);
observer.disconnect();

function lazyLoadImage(img) {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
      img.src = img.dataset.src;
      img.classList.add('loaded');
      observer.unobserve(img);  // 로드 후 관찰 중지
    }
  }, { rootMargin: '200px' });  // 200px 전에 로드 시작

  observer.observe(img);
}

document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);

const animateObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      entry.target.classList.toggle('visible', entry.isIntersecting);
    });
  },
  { threshold: 0.1 }
);

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  animateObserver.observe(el);
});

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

import { useEffect, useRef, useState } from 'react';

function useIntersectionObserver(options?: IntersectionObserverInit) {
  const ref = useRef<HTMLElement>(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);

    observer.observe(element);
    return () => observer.disconnect();
  }, []);

  return { ref, isIntersecting };
}

// 사용
function LazySection() {
  const { ref, isIntersecting } = useIntersectionObserver({ threshold: 0.1 });
  return <section ref={ref}>{isIntersecting && <HeavyContent />}</section>;
}