클로저와 메모리 누수 — 언제 문제가 되는가

지난 글에서 클로저가 얼마나 강력한 패턴인지 살펴봤습니다. 그런데 클로저는 그 본질인 “외부 변수 참조 유지”가 곧 양날의 검입니다. 의도적으로 상태를 유지하는 것은 좋지만, 의도치 않게 불필요한 데이터를 메모리에 붙잡아 두면 **메모리 누수(Memory Leak)**가 발생합니다. JavaScript의 가비지 컬렉터는 완전히 자동이지만, 참조 사슬이 끊기지 않으면 아무리 정교한 GC도 메모리를 회수할 수 없습니다.

GC와 클로저의 관계

V8의 가비지 컬렉터는 Mark-and-Sweep 방식을 사용합니다. GC 루트(전역 변수, 스택 변수)에서 도달 가능한 객체를 마킹하고, 마킹되지 않은 객체를 회수합니다.

클로저가 외부 변수를 참조하면, 그 클로저가 살아있는 한 외부 렉시컬 환경 전체(해당 변수를 포함)가 도달 가능 상태가 됩니다. 클로저가 실제로 그 변수를 사용하든 아니든 상관없이 환경 전체가 유지될 수 있습니다.

function outer() {
  const largeData = new Array(1_000_000).fill('💾');
  const small = 'just a string';

  // largeData를 캡처한 클로저
  return () => console.log(small); // small만 쓰지만
  // 일부 엔진에서 largeData도 유지될 수 있음
}

const fn = outer(); // largeData가 GC 대상이 되지 않을 수 있음

최신 V8은 실제로 사용하는 변수만 캡처하도록 최적화하지만, 동일 스코프의 다른 함수가 largeData를 참조하면 상황이 달라집니다.

GC와 클로저 — 참조 사슬

패턴 1 — 이벤트 리스너 누수

DOM 이벤트 리스너는 가장 흔한 클로저 누수 원인입니다. 핸들러가 DOM 요소나 대형 데이터를 캡처하면, 핸들러가 제거되지 않는 한 메모리가 유지됩니다.

// ❌ 익명 핸들러 → 제거 불가
function setupHandler() {
  const el = document.getElementById('button');
  const data = loadLargeData(); // 수 MB

  el.addEventListener('click', () => {
    console.log(el.id, data); // el과 data를 클로저로 캡처
  });
  // el이 DOM에서 제거되어도 핸들러가 el과 data를 참조
  // → GC 불가
}

// ✓ named handler + 정리 함수
function setupHandler() {
  const el = document.getElementById('button');
  const data = loadLargeData();

  const handler = () => console.log(el.id, data);
  el.addEventListener('click', handler);

  return () => el.removeEventListener('click', handler); // 정리 함수
}

const cleanup = setupHandler();
// 필요 없어지면:
cleanup(); // 핸들러 제거 → el, data 참조 해제 → GC 가능

클로저 메모리 누수 패턴과 해결

패턴 2 — 타이머 누수

setInterval은 명시적으로 clearInterval을 호출하지 않으면 영원히 실행됩니다. 콜백이 클로저를 통해 외부 데이터를 참조하면 그 데이터도 함께 유지됩니다.

// ❌ clearInterval 없음 → 영구 실행 + 누수
function startPolling(url) {
  const cache = {}; // 계속 커질 수 있음

  setInterval(async () => {
    const data = await fetch(url).then(r => r.json());
    cache[Date.now()] = data; // cache가 클로저로 계속 살아있음
  }, 1000);
}

// ✓ 정리 가능한 형태
function startPolling(url) {
  const cache = {};

  const id = setInterval(async () => {
    const data = await fetch(url).then(r => r.json());
    cache[Date.now()] = data;
  }, 1000);

  return () => clearInterval(id); // 정리 함수 반환
}

const stopPolling = startPolling('/api/data');
// 사용 완료 후:
stopPolling();

패턴 3 — 캐시 무한 증가

메모이제이션 캐시를 Map으로 구현하면 키가 계속 추가될 수 있습니다. 캐시 크기를 제한하지 않으면 메모리가 계속 증가합니다.

// ❌ 캐시가 무한히 커짐
function memoize(fn) {
  const cache = new Map();
  return (key) => {
    if (!cache.has(key)) cache.set(key, fn(key));
    return cache.get(key);
  };
}

// ✓ LRU 방식으로 크기 제한
function memoizeWithLimit(fn, maxSize = 100) {
  const cache = new Map();
  return (key) => {
    if (cache.has(key)) {
      const val = cache.get(key);
      cache.delete(key);
      cache.set(key, val); // 최근 사용 순으로 이동
      return val;
    }
    const result = fn(key);
    if (cache.size >= maxSize) {
      // Map 순서 보장: 첫 번째 키(가장 오래된)를 삭제
      cache.delete(cache.keys().next().value);
    }
    cache.set(key, result);
    return result;
  };
}

WeakMap으로 약한 참조 활용

DOM 요소를 키로 데이터를 연결할 때 Map 대신 WeakMap을 쓰면, DOM 요소가 제거될 때 연결 데이터도 자동으로 GC됩니다.

// ❌ Map: el이 DOM에서 제거되어도 Map이 참조 유지
const data = new Map();
data.set(domElement, { clicks: 0, history: [] });

// ✓ WeakMap: domElement가 사라지면 data도 GC 대상
const data = new WeakMap();
data.set(domElement, { clicks: 0, history: [] });
// domElement = null → GC 시 WeakMap 항목도 제거

WeakMap의 키는 GC 루트에서 도달 불가능해지면 WeakMap이 보유한 참조에도 불구하고 GC됩니다. 이를 **약한 참조(weak reference)**라고 합니다.

React에서 useEffect 정리 함수

React에서 useEffect는 정리 함수를 반환할 수 있습니다. 이를 통해 이벤트 리스너, 타이머, 구독을 컴포넌트 언마운트 시 자동 해제합니다.

useEffect(() => {
  const handler = (e) => console.log(e.key);
  window.addEventListener('keydown', handler);

  // 정리 함수: 언마운트 또는 다음 effect 실행 전 호출됨
  return () => window.removeEventListener('keydown', handler);
}, []);

정리 함수를 빠뜨리면 컴포넌트가 언마운트된 후에도 핸들러가 살아있어, 이미 사라진 컴포넌트의 state를 업데이트하려 해 경고가 발생합니다.

누수 진단 방법

Chrome DevTools의 Memory 탭에서 Heap Snapshot을 찍어 비교하거나, Allocation Timeline으로 메모리 증가 패턴을 확인할 수 있습니다.

// 의도적 GC 트리거 (개발/테스트용)
// Node.js에서만 작동
if (global.gc) {
  global.gc(); // node --expose-gc 옵션 필요
}

실무에서는 페이지를 오래 열어두었을 때 메모리 사용량이 계속 증가하는지 Task Manager(Chrome: Shift+Esc)로 먼저 확인합니다.

핵심 체크리스트

상황	해결책
addEventListener	removeEventListener + 정리 함수 반환
setInterval	clearInterval + 정리 함수 반환
DOM 연결 데이터	Map → WeakMap 교체
무한 캐시	크기 제한(LRU) 또는 TTL 적용
React effect	return () => cleanup() 필수

지난 글: 클로저 패턴 — 실전 활용법

다음 글: this 규칙 완전 정복

읽어주셔서 감사합니다. 😊