[Vue] unMounted시 해제 대상 목록 정리

아래와 같은 목록은 unMounted hook에서 직접적으로 해제시켜 줘야한다.

해제 목록

⏱ 타이머	setTimeout, setInterval	clearInterval(timerId)
🧭 이벤트	DOM 이벤트, 전역 이벤트	window.removeEventListener(...)
💨 비동기 요청	fetch, axios (취소 가능할 때)	abortController.abort()
🎣 watch, effect	Vue의 watch, watchEffect	stop() 사용 or onCleanup()
🔁 subscription	WebSocket, EventSource, MQTT 등	socket.close(), unsubscribe()
🧬 외부 라이브러리	chart.js, mapbox, video.js 등	instance.destroy(), dispose() 등
🧱 MutationObserver	DOM 변경 감지 시 사용	observer.disconnect()
💾 DB, 캐시 등	IndexedDB, LocalForage 등 연결	연결 종료 로직
🧪 custom composable	내부에서 등록된 리소스 해제	return { stopFn } 형식으로 처리

 

흔히 사용하는 것으로는 document.addEventListner, setInterval 이 있다.

 

Composable 활용

위 객체 대상들에 대한 Composable 함수를 생성하여 해제 하는 과정을 캡슐화 할 수 있음.

vueUse 에는 useEventListener 등이 그러한 함수.

유의사항

watch내에서 composable을 사용하면 onUnmounted 가 제대로 동작하지 않음.

반드시 setup 훅 내에서 사용해준다.

 

Bad: Watch 내에서 composable 사용

<script setup>
	const someData = ref()
	watch(someData, () => {
		useEventListener(...)
	})
</script>

GOOD

<script setup>
	const someData = ref()
	const stop = useEventListener(...);

  watch(someData, (val) => {
    val ? stop.resume() : stop.pause(); // ⏯️ 동적 제어
  });
</script>

watch를 사용하여 제어 할 일이 있으면 stop 함수 를 이용하여 제어하는 것이 좋다.

☑️ 중지 및 시작에 대한 composable을 생성시에는 stop 함수를 반드시 구현해주어 유연하게 처리 할 수 있도록 한다