[Vue.js] onBeforeUnmount 훅을 활용한 컴포넌트 소멸 전 작업

Vue.js에서는 컴포넌트가 소멸되기 직전에 실행되는 onBeforeUnmount 훅을 제공합니다. 이 훅은 컴포넌트가 DOM에서 제거되기 전에 수행해야 할 작업을 처리할 때 사용됩니다. 주로 이벤트 리스너를 해제하거나 리소스를 정리하는 등의 작업에 활용됩니다.

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

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="toggleComponent">컴포넌트 토글</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('컴포넌트가 마운트되었습니다.');
    let interval = null;

    function toggleComponent() {
      if (interval) {
        clearInterval(interval);
        interval = null;
        message.value = '컴포넌트가 제거되었습니다.';
      } else {
        interval = setInterval(() => {
          console.log('타이머 동작 중...');
        }, 1000);
        message.value = '컴포넌트가 다시 마운트되었습니다.';
      }
    }

    onBeforeUnmount(() => {
      // 컴포넌트가 소멸되기 전에 호출되는 함수
      // 여기에 소멸 전 작업을 수행할 수 있습니다.
      if (interval) {
        clearInterval(interval);
      }
    });

    return {
      message,
      toggleComponent
    };
  }
};
</script>

예제 설명

위 예제는 "컴포넌트 토글" 버튼을 클릭하여 컴포넌트를 생성하거나 제거하는 Vue 컴포넌트입니다.

1. message 변수는 컴포넌트에서 사용될 메시지를 담고 있습니다.
2. toggleComponent 메소드는 버튼을 클릭하여 컴포넌트를 토글합니다. 컴포넌트가 생성될 때마다 1초마다 콘솔에 메시지를 출력하는 타이머가 시작됩니다.
3. onBeforeUnmount 훅 내부에서는 컴포넌트가 소멸되기 직전에 호출되는 함수가 정의되어 있습니다. 여기에서는 타이머를 해제합니다.

onBeforeUnmount 훅을 사용하면 Vue 컴포넌트가 소멸되기 전에 필요한 작업을 수행할 수 있습니다. 이를 통해 이벤트 리스너를 해제하거나 리소스를 정리하는 등의 작업을 처리할 수 있습니다.