Antigravity Agent
139 lines
4.2 KiB
Markdown
139 lines
4.2 KiB
Markdown
---
|
|
id: web-intersectionobserver-patterns
|
|
title: IntersectionObserver — Lazy / Infinite Scroll / Tracking
|
|
category: Coding
|
|
status: draft
|
|
source_trust_level: B
|
|
verification_status: conceptual
|
|
created_at: 2026-05-09
|
|
updated_at: 2026-05-09
|
|
tags: [web, intersection-observer, lazy, vibe-coding]
|
|
tech_stack: { language: "JavaScript / browser", applicable_to: ["Web"] }
|
|
applied_in: []
|
|
aliases: [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 이미지
|
|
```tsx
|
|
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
|
|
```tsx
|
|
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)
|
|
```ts
|
|
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
|
|
```ts
|
|
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 — 형제
|
|
```ts
|
|
// 크기 변경
|
|
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]]
|