발행 테스트: useEffect cleanup 함수 — 1년차에 가장 자주 놓치는 자리

왜 1년차가 자주 놓치는가

useEffect의 cleanup은 React가 컴포넌트를 unmount하거나 deps가 바뀔 때 실행된다. 부수 효과를 만들었다면 반드시 정리해야 메모리 누수와 race condition을 막을 수 있다.

3가지 누락 패턴

1. 이벤트 리스너

// ✗ Bad — 리스너가 unmount 후에도 살아남음
useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);

// ✓ Good
useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

2. setInterval / setTimeout

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

3. fetch — race condition

// ✓ Good — AbortController로 이전 요청 취소
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal })
    .then((r) => r.json())
    .then(setData)
    .catch((e) => { if (e.name !== "AbortError") throw e; });
  return () => ctrl.abort();
}, [url]);

1년차 체크리스트: useEffect 안에서 "무언가 시작했다"면 cleanup에서 "멈춘다"가 짝이다.

관련 디버깅 패턴은 React 메모리 누수 추적 가이드에 정리해두었다.