[Vue.js] onUnmounted 훅을 활용한 컴포넌트 정리

Vue.js에서는 컴포넌트가 소멸되기 직전에 실행되는 onUnmounted 훅을 제공합니다. 이 훅은 컴포넌트의 정리(clean-up) 작업을 수행할 때 사용됩니다. 컴포넌트가 제거되기 전에 리소스를 해제하거나 이벤트 리스너를 제거하는 등의 작업을 처리할 수 있습니다.

아래는 onUnmounted 훅을 사용한 Vue 컴포넌트의 예제입니다.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="startTimer">타이머 시작</button>
    <button @click="stopTimer">타이머 정지</button>
  </div>
</template>

<script>
import { ref, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('');
    let timer = null;

    function startTimer() {
      message.value = '타이머 시작됨';
      timer = setInterval(() => {
        console.log('타이머 동작 중...');
      }, 1000);
    }

    function stopTimer() {
      message.value = '타이머 정지됨';
      clearInterval(timer);
    }

    onUnmounted(() => {
      // 컴포넌트가 제거되기 전에 호출되는 함수
      // 여기에 정리(clean-up) 작업을 수행할 수 있습니다.
      if (timer) {
        clearInterval(timer);
      }
    });

    return {
      message,
      startTimer,
      stopTimer
    };
  }
};
</script>

예제 설명

위 예제는 "타이머 시작" 버튼을 클릭하여 타이머를 시작하고 "타이머 정지" 버튼을 클릭하여 타이머를 정지하는 Vue 컴포넌트입니다.

1. startTimer 메소드는 타이머를 시작하고, 1초마다 콘솔에 메시지를 출력합니다.
2. stopTimer 메소드는 타이머를 정지합니다.
3. onUnmounted 훅은 컴포넌트가 소멸되기 직전에 호출되는 함수를 정의합니다. 여기에서는 타이머를 정지하는 작업이 포함되어 있습니다.

이러한 방식으로 onUnmounted 훅을 사용하면 Vue 컴포넌트가 소멸되기 전에 필요한 정리 작업을 수행할 수 있습니다. 이는 메모리 누수를 방지하고 리소스를 효율적으로 관리하는 데 도움이 됩니다.