👀 30. Intersection Observer API — 스크롤 감지의 효율적인 대안

---

프론트엔드에서 다음과 같은 기능이 필요할 때가 많다.

• 사용자가 특정 섹션에 도달했을 때 애니메이션 실행
• 무한 스크롤에서 다음 콘텐츠 자동 로딩
• lazy loading 이미지 처리
• scroll spy 기능 구현

예전엔 scroll 이벤트를 직접 감지해서 처리했지만,
지금은 더 성능 좋고, 간단하게 구현 가능한 API가 있다.
바로 Intersection Observer API다.

---

✅ Intersection Observer란?

요소가 뷰포트(또는 특정 부모 요소)와 교차되는 지점을 비동기적으로 감지하는 브라우저 API

즉, 화면에 보이기 시작했는지 감지하는 데 최적화된 API다.
스크롤 이벤트와 달리 연속적인 이벤트 트리거 없이 효율적으로 감지 가능하다.

---

🔧 기본 사용법

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('요소가 화면에 보임');
    }
  });
});

observer.observe(document.querySelector('#target'));

주요 개념

• entries: 관찰 대상 요소들의 교차 상태 목록
• entry.isIntersecting: 요소가 화면 안에 있는지 여부
• entry.intersectionRatio: 보이는 비율 (0 ~ 1)

---

⚙️ 옵션 설정

new IntersectionObserver(callback, {
  root: null, // 관찰 기준 (null이면 viewport)
  rootMargin: '0px 0px -100px 0px', // 여백 지정
  threshold: 0.5 // 50% 이상 보일 때 트리거
});

---

💡 실전 예제: 무한 스크롤

const observerRef = useRef<IntersectionObserver | null>(null);
const targetRef = useRef(null);

useEffect(() => {
  observerRef.current = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
      loadMore();
    }
  });

  if (targetRef.current) {
    observerRef.current.observe(targetRef.current);
  }

  return () => {
    observerRef.current?.disconnect();
  };
}, []);

✅ targetRef에 걸린 요소가 화면에 보이면 loadMore() 호출됨

---

🖼️ 이미지 Lazy Loading 예시

<img data-src="real-image.jpg" class="lazy" />

const images = document.querySelectorAll('.lazy');
const io = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      obs.unobserve(entry.target);
    }
  });
});

images.forEach(img => io.observe(img));

✅ 뷰포트에 들어오면 이미지 로딩 시작, 성능 최적화에 탁월

---

🧠 왜 Intersection Observer가 좋은가?

항목	scroll 이벤트	Intersection Observer
CPU 부하	높음 (계속 트리거됨)	낮음 (비동기 감지)
성능	스로틀링 필요	기본적으로 효율적
구현 난이도	비교적 복잡함	매우 간단
사용성	모든 요소 직접 추적 필요	Observer 1개로 여러 요소 추적 가능

---

📝 내가 느낀 점

예전엔 무한 스크롤 만들 때 scrollTop, offsetHeight 같은 계산을
매번 하면서 스로틀링도 걸고 복잡하게 짰다.
그런데 Intersection Observer를 알게 된 후에는
코드도 간단하고, 성능도 좋고, 유지보수도 쉬워졌다.

실제로 Next.js에서 이미지 lazy loading 기본 처리도 이 방식으로 작동한다는 걸 알고
더더욱 신뢰가 생겼다.

---

👀 "스크롤 추적, 더 이상 직접 하지 말자. Intersection Observer가 다 해준다."

---