프론트엔드 JavaScript에서 메모리 누수가 발생하는 흔한 원인은 무엇인가요?

정리되지 않은 이벤트 리스너, 타이머, 구독, 오래 유지되는 클로저, 분리된 DOM 참조가 메모리 누수의 흔한 원인입니다. 컴포넌트 해제 시 정리하고 브라우저 메모리 프로파일러로 확인해야 합니다.

핵심 개념

핵심 기준은 참조 유지와 정리(cleanup) 누락입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

JavaScript는 실행 문맥, 비동기 흐름, 참조 관계가 코드 동작에 직접 영향을 주는 언어입니다. 그래서 문법을 외우는 것보다 값이 언제 결정되고 어떤 순서로 실행되는지 이해하는 것이 중요합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

useEffect(() => {
  const onResize = () => setWidth(window.innerWidth);
  window.addEventListener("resize", onResize);

  return () => {
    window.removeEventListener("resize", onResize);
  };
}, []);

이벤트 리스너, 타이머, 구독은 생성한 곳에서 해제하는 규칙을 갖는 것이 좋습니다. 참조가 남으면 더 이상 필요 없는 객체도 회수되지 않습니다.

실무에서 주의할 점

• 암묵적 변환이나 실행 문맥에 기대면 작은 리팩터링에도 동작이 달라질 수 있습니다.
• 비동기 코드에서는 실행 순서와 에러 전파 경로를 반드시 확인해야 합니다.
• 브라우저 이벤트나 타이머를 사용했다면 정리(cleanup) 시점을 놓치지 않는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

JS, 메모리, 성능, 가비지컬렉션

정리

한 줄로 정리하면, 정리되지 않은 이벤트 리스너, 타이머, 구독, 오래 유지되는 클로저, 분리된 DOM 참조가 메모리 누수의 흔한 원인입니다. 컴포넌트 해제 시 정리하고 브라우저 메모리 프로파일러로 확인해야 합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

프론트엔드 메모리 누수의 흔한 원인

브라우저 메모리 누수는 더 이상 필요 없는 객체가 이벤트 리스너, 타이머, 클로저, 전역 캐시 등에 의해 계속 참조될 때 발생합니다.

useEffect(() => {
  const onResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', onResize);
  return () => window.removeEventListener('resize', onResize);
}, []);

자주 놓치는 사례

• setInterval을 해제하지 않음
• WebSocket, EventSource 구독을 닫지 않음
• DOM 노드에 직접 붙인 이벤트를 제거하지 않음
• 큰 데이터를 전역 store/cache에 무기한 보관
• unmounted 컴포넌트에 비동기 결과를 반영

useEffect(() => {
  const controller = new AbortController();
  fetch('/api/search', { signal: controller.signal });
  return () => controller.abort();
}, []);

확인 방법

Chrome DevTools의 Performance/Memory 탭에서 heap snapshot을 비교하고, detached DOM tree나 계속 증가하는 listener 수를 확인합니다. React에서는 effect cleanup이 있는지 먼저 점검하는 것이 빠릅니다.