[Vue] Vue3에서 onUnmounted() 훅 사용 가이드

onUnmounted()는 Vue 3에서 컴포넌트가 DOM에서 완전히 언마운트된 후 호출되는 생명주기 훅입니다. 컴포넌트가 제거되었으며 더 이상 사용자와 상호 작용하지 않음을 의미하며, 마무리 작업이나 분석 로직을 수행하는 데 사용됩니다. 다음과 같은 다양한 활용 사례가 있습니다.

1. 사용 분석 기록:

• 컴포넌트 사용 기간, 사용자 이벤트, 성능 데이터 등을 기록하여 분석에 활용합니다.
• 사용 패턴 파악, 사용자 만족도 평가, 애플리케이션 개선에 도움이 되는 정보를 수집합니다.
• 주의 사항: 개인정보 침해 문제에 유의하고, 사용자 동의를 얻은 후에만 기록해야 합니다.

2. 로그 기록:

• 컴포넌트 언마운트 시점의 에러, 경고 메시지, 디버깅 정보 등을 로그로 기록합니다.
• 문제 해결, 성능 최적화, 코드 개선에 도움이 되는 데이터를 수집합니다.
• 주의 사항: 과도한 로그 기록은 저장 공간 낭비와 성능 저하를 초래할 수 있으므로 필요한 정보만 선택적으로 기록해야 합니다.

3. 리소스 해제 (확인 및 추가):

• onBeforeUnmount() 훅에서 수행하지 못한 리소스 해제 작업을 추가적으로 수행합니다.
• 특히, 비동기적으로 처리되는 리소스 해제가 필요한 경우 사용됩니다.
• 주의 사항: 모든 리소스가 제대로 해제되었는지 꼼꼼하게 확인해야 합니다.

4. 외부 라이브러리 정리:

• 컴포넌트에서 사용된 외부 라이브러리 또는 플러그인을 정리합니다.
• 메모리 누수 방지, 성능 향상, 코드 간결성 유지를 위해 필요한 작업입니다.
• 주의 사항: 라이브러리별 문서를 참고하여 정리 방법을 확인해야 합니다.

onUnmounted() 사용법:

import { onUnmounted } from 'vue'

export default {
  setup() {
    onUnmounted(() => {
      // 사용 분석 기록, 로그 기록, 리소스 해제, 외부 라이브러리 정리 등을 수행
    })
  }
}

참고:

• onUnmounted() 훅은 setup() 옵션에서만 사용할 수 있습니다.
• unmounted 훅은 이전 버전의 Vue에서 사용되었으나, Vue 3에서는 onUnmounted() 훅으로 대체되었습니다.

onUnmounted() 활용 사례:

• 컴포넌트가 언마운트될 때 사용된 메모리 양을 기록합니다.
• 사용자가 컴포넌트와 상호 작용한 횟수를 분석합니다.
• 특정 기능 사용 여부를 기록하여 인기 있는 기능을 파악합니다.
• 컴포넌트별 에러 발생 빈도를 기록하여 문제점을 개선합니다.
• 사용하지 않는 이미지, 스크립트, CSS 파일을 제거합니다.

onUnmounted() 훅은 컴포넌트가 완전히 제거된 후 필요한 작업을 수행하는 데 유용한 도구입니다. 하지만, 개인정보 침해 문제에 유의하고, 과도한 로그 기록 및 불필요한 리소스 사용은 피해야 합니다.

주의: onUnmounted() 훅은 DOM 조작이나 이벤트 리스너 등록과 같은 작업에 사용해서는 안 됩니다. 이러한 작업은 onBeforeUnmount() 훅에서 수행해야 합니다.