♻️ WeakMap을 활용한 안전한 참조 관리 – 클로저, 캐시, 메모리 누수 방지 전략

♻️ WeakMap을 활용한 안전한 참조 관리 – 클로저, 캐시, 메모리 누수 방지 전략

자바스크립트에서 Map과 Set은 키-값 저장에 강력한 도구이지만, 객체를 키로 사용하면 메모리 누수 위험이 있습니다.
이 문제를 해결하기 위해 등장한 것이 바로 WeakMap과 WeakSet입니다.
이번 글에서는 WeakMap의 동작 원리와 실무에서 안전한 참조 관리에 어떻게 활용하는지 알아봅니다.

---

1. WeakMap이란?

WeakMap은 key가 반드시 객체여야 하며,
GC(가비지 컬렉션)가 key의 생존 여부에 따라 value도 자동 정리되는 특징이 있습니다.

const wm = new WeakMap();

let obj = { name: "Alice" };
wm.set(obj, "some data");

obj = null; // obj가 더 이상 참조되지 않으면 GC 대상 → WeakMap도 자동 삭제

• ✅ 메모리 누수 방지에 매우 유용
• ❌ 키가 primitive 값이면 에러 발생
• ❌ 반복 불가능 (forEach, size 등 없음)

---

2. WeakMap vs Map 차이 정리

항목	Map	WeakMap
Key 타입	모든 타입 가능	객체만 가능
GC와 연동	❌ 수동 제거 필요	✅ 키 객체가 없어지면 자동 제거
반복 가능	✅ entries(), forEach 등 지원	❌ 반복 불가 (보안/성능 이유)
용도	범용 데이터 저장	은닉성 있는 캐시, 클로저, 참조 관리

---

3. 실무 예제 ① – private data 은닉

const privateData = new WeakMap();

class User {
  constructor(name, password) {
    this.name = name;
    privateData.set(this, { password });
  }

  checkPassword(input) {
    return privateData.get(this).password === input;
  }
}

const u = new User("Alice", "1234");
console.log(u.checkPassword("1234")); // 👉 true

👉 외부에서는 privateData 접근 불가하며, User 인스턴스가 사라지면 자동으로 GC됩니다.

---

4. 실무 예제 ② – DOM 요소에 정보 캐싱

const elementData = new WeakMap();

function bindTooltip(el, text) {
  elementData.set(el, { tooltip: text });
  el.addEventListener("mouseenter", () => {
    showTooltip(elementData.get(el).tooltip);
  });
}

👉 DOM 요소가 제거되면 el도 GC 대상이 되며, elementData도 자동 삭제됩니다.

---

5. 실무 예제 ③ – 클로저 내부 안전한 참조

function createCache() {
  const cache = new WeakMap();

  return {
    get(key) {
      return cache.get(key);
    },
    set(key, value) {
      cache.set(key, value);
    }
  };
}

const c = createCache();

let obj = { id: 1 };
c.set(obj, "data");

obj = null; // 👉 GC 대상 → 캐시 자동 해제

---

6. WeakMap 사용 시 주의점

• 📌 key는 반드시 객체여야 함 (문자열, 숫자 사용 불가)
• 📌 순회, 전체 조회 불가능 → 필요한 경우 Map 사용
• 📌 캐시처럼 단방향 참조 시 매우 유용

---

📌 마무리

WeakMap은 클로저, DOM, 캐시 등에서 발생할 수 있는 불필요한 참조로 인한 메모리 누수를 방지할 수 있는 강력한 도구입니다.
특히 은닉성이 필요하거나 수명이 짧은 객체를 다룰 때 적극 활용해보세요.

다음 글에서는 DOM 참조와 비동기 로직에서의 메모리 주의점을 정리하며, 실전에서 자주 발생하는 누수 상황들을 다룰 예정입니다.