🌳 Vue 컴포넌트 메모리 누수 방지 패턴

🌳 Vue 컴포넌트 메모리 누수 방지 패턴

Vue 고급 시리즈 > 7️⃣ 고급 주제 및 최적화 > 컴포넌트 메모리 누수 방지 패턴

• 1. 메모리 누수란?
• 2. Vue에서 발생 가능한 메모리 누수 사례
• 3. 메모리 누수 방지를 위한 실전 패턴
• 4. 메모리 누수 디버깅 팁
• 🔚 다음 글 안내

---

1. 메모리 누수란?

메모리 누수(Memory Leak)란, 더 이상 참조되지 않지만 해제되지 않은 메모리 공간이 점점 쌓여가는 현상입니다.
브라우저 기반 SPA(Vue 포함)에서는 컴포넌트를 전환하거나 반복적으로 생성/삭제하는 과정에서 누수가 발생할 수 있습니다.

2. Vue에서 자주 발생하는 메모리 누수 사례

• watch / eventListener를 해제하지 않고 컴포넌트를 언마운트
• setInterval, setTimeout이 남아있음
• Composition API에서 side-effect가 마운트 해제 시 제거되지 않음
• WebSocket, Observer 등을 종료하지 않고 남겨두는 경우

🧨 예시 - 이벤트 리스너 해제 안함

mounted() {
  window.addEventListener('resize', this.handleResize); // ✅ 등록
},
beforeUnmount() {
  window.removeEventListener('resize', this.handleResize); // ✅ 해제 필수
}

🧨 예시 - setInterval 해제 누락

setup() {
  const intervalId = setInterval(() => {
    console.log('자동 갱신...');
  }, 5000);

  onUnmounted(() => {
    clearInterval(intervalId); // ✅ 해제 필수
  });
}

3. 메모리 누수 방지를 위한 실전 패턴

✅ onUnmounted() 또는 beforeUnmount 사용하기

setup() 함수에서는 Composition API의 onUnmounted(),
Options API에서는 beforeUnmount() 훅을 활용해 정리 작업을 수행해야 합니다.

✅ watchEffect / watch는 stop 함수로 명시적 해제 가능

const stop = watchEffect(() => {
  console.log('변화 감지 중...');
});

onUnmounted(() => stop()); // ✅ 누수 방지

✅ 외부 모듈(WebSocket, Observer 등)은 연결 해제 로직 필요

onMounted(() => socket.connect());

onUnmounted(() => socket.disconnect()); // ✅ 반드시 해제

✅ mitt 또는 EventBus 해제

onMounted(() => {
  emitter.on('msg', handleMsg);
});
onUnmounted(() => {
  emitter.off('msg', handleMsg);
});

✅ v-if와 v-show를 적절히 선택해 불필요한 컴포넌트 렌더링 방지

• v-if: DOM 자체를 제거 (해제되며 메모리 확보)
• v-show: DOM은 유지되므로 메모리는 남음

4. 메모리 누수 디버깅 팁

• Chrome DevTools → Memory 탭에서 Heap Snapshot 비교
• Components → Detach from DOM 항목 확인
• Vue Devtools → 컴포넌트 누적 여부 확인

🔚 다음 글 안내

이제 Vue에서 컴포넌트 메모리 누수를 방지하는 실전 패턴까지 이해했습니다.
다음 글에서는 Vue + TypeScript 환경 구성을 다루겠습니다.

👉 다음 글: Vue + TypeScript 프로젝트 구성 가이드