2nd/10_Wiki/Topics/Frontend/useEffect 클린업(Cleanup).md

---
id: wiki-2026-0508-useeffect-클린업-cleanup
title: useEffect 클린업(Cleanup)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [useEffect cleanup, useEffect cleanup function, useEffect 클린업]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, useEffect, cleanup, lifecycle, hooks]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react-19
---

# useEffect 클린업(Cleanup)

## 매 한 줄
> **"매 useEffect 의 return function — 매 next effect 또는 unmount 직전 실행"**. 매 subscription, timer, listener, abortable fetch, websocket 의 leak 방지. 매 React 18+ StrictMode 의 double-invoke 가 cleanup 정확성 검증. 매 idempotent + 매 symmetric 한 setup/teardown 매 핵심.

## 매 핵심

### 매 실행 시점
- **Mount**: 매 effect run, cleanup 미실행.
- **Re-run (deps 변경)**: 매 이전 cleanup → new effect.
- **Unmount**: 매 마지막 cleanup 실행.
- **StrictMode (dev)**: 매 mount → cleanup → mount 매 simulate — 매 cleanup 의 정확성 강제.

### 매 cleanup 필요 case
- **Subscription**: store, observable, websocket → unsubscribe.
- **Timer**: setTimeout, setInterval → clear.
- **Event listener**: addEventListener → removeEventListener.
- **Abortable fetch**: AbortController → abort.
- **DOM mutation**: portal, manual DOM insert → remove.
- **External lib**: chart, map instance → destroy.

### 매 응용
1. **Stale closure 방지**: 매 cleanup 으로 이전 effect 의 reference 정리.
2. **Race condition 방지**: 매 fetch 의 ignore flag pattern.
3. **Animation cleanup**: requestAnimationFrame cancel.
4. **Subscription chain**: 매 outer effect 의 cleanup 안에서 inner subscription 도.
5. **Test reliability**: 매 cleanup 가 test 의 isolation 보장.

## 💻 패턴

### Event listener
```tsx
useEffect(() => {
  const handler = (e: KeyboardEvent) => {
    if (e.key === 'Escape') closeModal();
  };
  document.addEventListener('keydown', handler);
  return () => document.removeEventListener('keydown', handler);
}, []);
```

### Timer
```tsx
useEffect(() => {
  const id = setTimeout(() => setShown(false), 3000);
  return () => clearTimeout(id);
}, [shown]);

// Interval
useEffect(() => {
  const id = setInterval(() => tick(), 1000);
  return () => clearInterval(id);
}, []);
```

### Abortable fetch (race-safe)
```tsx
useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/user/${id}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(e => {
      if (e.name !== 'AbortError') console.error(e);
    });

  return () => controller.abort();
}, [id]);
// 매 id 변경 시 이전 fetch abort — race condition 방지.
```

### WebSocket
```tsx
useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = (e) => setMessages(m => [...m, e.data]);
  ws.onerror = (e) => console.error(e);
  return () => {
    ws.onmessage = null;
    ws.onerror = null;
    ws.close();
  };
}, [url]);
```

### Subscription pattern
```tsx
useEffect(() => {
  const unsub = store.subscribe(setState);
  return unsub; // 매 직접 return — concise.
}, [store]);
```

### Ignore flag — fetch (legacy without AbortController)
```tsx
useEffect(() => {
  let ignore = false;
  fetch(url).then(r => r.json()).then(data => {
    if (!ignore) setData(data);
  });
  return () => { ignore = true; };
}, [url]);
// 매 AbortController 가 더 권장 (network cancel 까지).
```

### requestAnimationFrame
```tsx
useEffect(() => {
  let raf: number;
  const tick = () => {
    setProgress(p => p + 1);
    raf = requestAnimationFrame(tick);
  };
  raf = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(raf);
}, []);
```

### IntersectionObserver
```tsx
useEffect(() => {
  if (!ref.current) return;
  const obs = new IntersectionObserver(([e]) => {
    if (e.isIntersecting) loadMore();
  });
  obs.observe(ref.current);
  return () => obs.disconnect();
}, [loadMore]);
```

### Third-party chart instance
```tsx
useEffect(() => {
  if (!containerRef.current) return;
  const chart = echarts.init(containerRef.current);
  chart.setOption(options);
  const onResize = () => chart.resize();
  window.addEventListener('resize', onResize);
  return () => {
    window.removeEventListener('resize', onResize);
    chart.dispose(); // 매 chart 의 own resources 정리
  };
}, [options]);
```

### Portal DOM
```tsx
useEffect(() => {
  const node = document.createElement('div');
  document.body.appendChild(node);
  setPortalNode(node);
  return () => {
    document.body.removeChild(node);
  };
}, []);
```

### StrictMode 의 double-invoke 대응
```tsx
// 매 StrictMode 가 dev 의 effect 를 mount → cleanup → mount 매 한 번 더.
// 매 cleanup 가 idempotent 하면 문제 없음.

useEffect(() => {
  let mounted = true;
  const id = setInterval(() => {
    if (mounted) tick();
  }, 1000);
  return () => {
    mounted = false;
    clearInterval(id);
  };
}, []);
// 매 위 mounted flag 매 redundant — clearInterval 만으로 충분.
// 매 그러나 async work 의 cancel 매 어려운 case 에서 유용.
```

### Async cleanup pattern
```tsx
useEffect(() => {
  let cancelled = false;
  (async () => {
    const data = await loadData();
    if (!cancelled) setData(data);
  })();
  return () => { cancelled = true; };
}, [id]);
// 매 cleanup function 매 async X — return 의 Promise 매 React 가 무시.
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Fetch | AbortController + abort. |
| Subscription | unsubscribe 직접 return. |
| Timer | clearTimeout/Interval. |
| Listener | addEventListener / removeEventListener pair. |
| 매 cleanup 불필요 | 매 console.log, 매 pure side-effect 없는 derivation. |

**기본값**: 매 모든 setup 의 paired teardown — 매 symmetric. 매 deps 가 자주 바뀌면 cleanup 의 cost 도 고려.

## 🔗 Graph
- 부모: [[useEffect]]
- 응용: [[AbortController]] · [[IntersectionObserver]]
- Adjacent: [[StrictMode]]

## 🤖 LLM 활용
**언제**: 매 모든 useEffect 안의 subscription, timer, listener, abortable async work 의 정리.
**언제 X**: 매 effect 가 pure derivation (state from props) — 매 useMemo 가 더 적합. 매 effect 자체 가 불필요한 case.

## ❌ 안티패턴
- **Cleanup 망각**: 매 listener leak — 매 unmount 후 setState 호출 → console warning.
- **Async cleanup return**: 매 `return async () => {...}` — 매 React 가 Promise 무시. 매 sync function.
- **Stale ref 캡처**: 매 cleanup 의 closure 가 이전 dep value 사용 — 매 명시적으로 ref 또는 latest pattern.
- **deps 빠짐**: 매 cleanup 가 outdated value 정리 — 매 ESLint react-hooks/exhaustive-deps 권장.
- **StrictMode 의 cleanup 회피 수단**: 매 `if (didMount.current) return; didMount.current = true` — 매 anti-pattern. 매 cleanup 정확성 으로 해결.

## 🧪 검증 / 중복
- Verified (React docs useEffect, React 18 StrictMode docs, Dan Abramov 의 useEffect 글).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — useEffect cleanup patterns, AbortController, StrictMode 대응 추가 |