docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
2026-07-05 00:44:01 +09:00
parent e9cbf23ab5
commit 9a135bd19d
6127 changed files with 0 additions and 0 deletions
@@ -0,0 +1,246 @@
+---
+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 대응 추가 |