2nd/10_Wiki/Topic_Programming/Coding/Web_IntersectionObserver_Patterns.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
web-intersectionobserver-patterns	IntersectionObserver — Lazy / Infinite Scroll / Tracking	Coding	draft	B	conceptual	2026-05-09	2026-05-09	web intersection-observer lazy vibe-coding	language applicable_to JavaScript / browser Web		lazy load infinite scroll viewport detection sentinel

IntersectionObserver

요소가 viewport 와 교차하는지 비동기 감지. scroll listener 보다 100배 가벼움. 무한 스크롤 / 이미지 lazy load / 노출 트래킹의 표준.

📖 핵심 개념

• 한 번 register → 비동기 callback.
• threshold: 몇 % 보일 때 trigger.
• root: viewport 또는 특정 ancestor.
• rootMargin: 화면 외 N px 도 포함.

💻 코드 패턴

Lazy load 이미지

function LazyImage({ src, alt }: { src: string; alt: string }) {
  const ref = useRef<HTMLImageElement>(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          ref.current!.src = src;
          setLoaded(true);
          obs.disconnect();
        }
      },
      { rootMargin: '200px' } // 200px 미리
    );
    obs.observe(ref.current!);
    return () => obs.disconnect();
  }, [src]);

  return <img ref={ref} alt={alt} className={loaded ? '' : 'placeholder'} />;
}

Infinite scroll — sentinel

function InfiniteList({ items, onLoadMore }: ...) {
  const sentinelRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) onLoadMore();
    });
    obs.observe(sentinelRef.current!);
    return () => obs.disconnect();
  }, [onLoadMore]);

  return <>
    {items.map(i => <Row key={i.id} {...i} />)}
    <div ref={sentinelRef} style={{ height: 1 }} />
  </>;
}

노출 트래킹 (impression)

const obs = new IntersectionObserver(
  entries => {
    entries.forEach(e => {
      if (e.isIntersecting && e.intersectionRatio >= 0.5) {
        const id = (e.target as HTMLElement).dataset.id;
        analytics.track('impression', { id });
        obs.unobserve(e.target); // 한 번만
      }
    });
  },
  { threshold: [0.5] }
);

document.querySelectorAll('[data-track-impression]').forEach(el => obs.observe(el));

React hook

function useInView(opts?: IntersectionObserverInit) {
  const ref = useRef<HTMLElement>(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => setInView(e.isIntersecting), opts);
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView] as const;
}

MutationObserver / ResizeObserver — 형제

// 크기 변경
const ro = new ResizeObserver(entries => {
  for (const e of entries) console.log(e.contentRect);
});
ro.observe(element);

🤔 의사결정 기준

상황	권장
이미지 lazy	IntersectionObserver 또는 native loading="lazy"
무한 스크롤	IntersectionObserver sentinel
트래킹 노출	IntersectionObserver + threshold
요소 크기 변화	ResizeObserver
DOM 노드 추가/제거	MutationObserver
스크롤 위치 정확 (px 단위)	scroll 이벤트 + throttle

❌ 안티패턴

• scroll listener 로 viewport 검사: 매 scroll fire — 60fps 깨짐. IO 가 답.
• disconnect 안 함: leak.
• threshold 0 만 사용: 1px 이라도 보이면 trigger. 50% 같은 조건 필요할 수 있음.
• rootMargin 음수 / 양수 헷갈림: 양수 = viewport 확장, 음수 = 줄임.
• observer 매 렌더 새로: useEffect 의존성 비어있어야.
• 노출 트래킹 매번 (unobserve 안 함): 한 사용자가 100번 노출 = 100 이벤트.
• SSR 환경에서 IntersectionObserver 직접 use: undefined. typeof window 체크.

🤖 LLM 활용 힌트

• 무한 스크롤 / lazy = IntersectionObserver 디폴트.
• React hook 화 (useInView).

🔗 관련 문서

• React_Virtualization_Lists
• Frontend_Image_Optimization