마운트 후 설정하고 언마운트 전에 외부 자원을 정리합니다.
onMounted는 DOM이 연결된 뒤 실행되고 onUnmounted는 컴포넌트 제거 전에 호출됩니다. 타이머와 이벤트 구독은 같은 참조로 정리해야 합니다.
컴포넌트 setup 자체에서 만든 반응형 effect는 보통 자동 정리되지만 외부 API 자원은 직접 해제합니다.
SSR에서는 브라우저 전용 API가 서버에 없으므로 mounted 경계나 환경 검사를 사용합니다.
익명 리스너를 등록하고 다른 익명 함수로 removeEventListener하면 제거되지 않습니다.
로컬 프로젝트에서 확인해보세요visibilitychange 리스너를 등록하고 정리하세요.
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const seconds = ref(0);
let timer;
onMounted(() => (timer = setInterval(() => seconds.value++, 500)));
onUnmounted(() => clearInterval(timer));
</script>
<template>
<main>
<h1>학습 시간 {{ seconds }}초</h1>
</main>
</template>