[Vue.js] unmounted: 컴포넌트 제거 후 실행되는 훅 이해하기

 

1. 개요

Vue.js 2.x에서 도입된 unmounted 훅은 컴포넌트 인스턴스가 DOM에서 제거된 후에 실행되는 라이프사이클 훅입니다. 컴포넌트 제거 후 리소스 해제, 이벤트 제거, 비동기 작업 취소 등을 수행하는 데 유용합니다.

unmounted 훅은 다음과 같은 상황에서 호출됩니다.

• 컴포넌트가 부모 컴포넌트 트리에서 제거될 때
• 컴포넌트를 담고 있는 DOM 요소가 제거될 때

2. unmounted 훅 사용 예시

다음은 unmounted 훅을 사용하는 예시입니다.

HTML

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="handleClick">제거하기</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: '제거될 컴포넌트',
    };
  },
  methods: {
    handleClick() {
      this.$destroy(); // 컴포넌트 인스턴스 제거
    },
    unmounted() {
      // 컴포넌트 제거 후에 수행할 작업을 여기에 작성합니다.
      console.log('컴포넌트가 제거되었습니다!');

      // 이벤트 제거
      window.removeEventListener('resize', this.onResize);

      // 비동기 작업 취소
      if (this.asyncTask) {
        this.asyncTask.cancel();
      }
    },
  },
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

 

설명:

• unmounted 훅은 컴포넌트 인스턴스가 DOM에서 제거된 후에 호출됩니다.
• 훅 내에서 console.log 메시지를 출력하여 컴포넌트 제거를 확인합니다.
• window.removeEventListener을 사용하여 컴포넌트와 관련된 이벤트 리스너를 제거합니다.
• this.asyncTask.cancel()을 사용하여 비동기 작업을 취소합니다.

3. unmounted 훅의 장점

unmounted 훅을 사용하면 다음과 같은 장점을 얻을 수 있습니다.

• 리소스 해제: 컴포넌트가 제거될 때 사용하지 않는 리소스를 해제하여 메모리 누수를 방지할 수 있습니다.
• 이벤트 제거: 컴포넌트와 관련된 이벤트 리스너를 제거하여 불필요한 이벤트 처리를 방지할 수 있습니다.
• 비동기 작업 취소: 컴포넌트가 제거되기 전에 진행 중인 비동기 작업을 취소하여 성능 저하를 방지할 수 있습니다.
• 코드 깔끔하게 유지: 컴포넌트 제거와 관련된 작업을 별도의 훅에 분리하여 코드를 깔끔하게 유지할 수 있습니다.

4. 주의 사항

• unmounted 훅은 컴포넌트 인스턴스가 실제로 DOM에서 제거된 후에 호출됩니다.
• unmounted 훅 내에서 DOM 요소에 직접 접근하려는 경우 주의해야 합니다. DOM 요소는 이미 제거되었을 수 있기 때문입니다.
• unmounted 훅은 beforeDestroy 훅보다 늦게 호출됩니다.

5. unmounted 훅과 함께 사용할 수 있는 다른 훅

• mounted: 컴포넌트 인스턴스가 DOM에 마운트된 후에 호출됩니다.
• updated: 컴포넌트 인스턴스가 업데이트된 후에 호출됩니다.
• beforeUpdate: 컴포넌트 인스턴스가 업데이트되기 직전에 호출됩니다.
• beforeDestroy: 컴포넌트 인스턴스가 제거되기 직전에 호출됩니다.