2026-08-01-fixing-a-memory-leak-in-react-by-cleaning-up-useeffect-fc5229f387
React useEffect 정리로 메모리 누수 해결하기
DEV Community
편집자 요약
이 글은 React 기반 대시보드에서 페이지를 이동하는 동안 진행 중인 API 요청이 끝난 뒤에도 상태를 업데이트하려 해 경고와 불필요한 메모리 사용이 발생한 문제를 다룹니다. 원인은 컴포넌트가 unmount된 뒤에도 비동기 작업이 계속되는 것이었습니다. 해결 방법으로 useEffect의 cleanup에서 AbortController API를 사용해 요청을 취소하고, AbortError는 별도로 처리했습니다.
인사이트
비동기 요청을 다루는 React 컴포넌트에서는 cleanup을 넣는 습관이 중요합니다. 다음 단계로는 useEffect와 AbortController를 직접 조합해 보고, unmount 시 어떤 경고가 사라지는지 확인하면 좋습니다.
댓글
댓글을 불러오는 중…