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

onBeforeUnmount()는 Vue 3에서 컴포넌트가 DOM에서 언마운트되기 직전에 호출되는 생명주기 훅입니다. 컴포넌트가 제거되기 전에 마무리 작업을 수행하거나, 리소스 해제를 위한 로직을 실행하는 데 사용됩니다. 다음과 같은 다양한 활용 사례가 있습니다.

1. 이벤트 리스너 제거:

• 컴포넌트에 등록된 이벤트 리스너를 제거하여 메모리 누수를 방지하는 데 사용됩니다.
• 직접 등록한 이벤트 리스너뿐만 아니라, 라이브러리 또는 타사 코드에서 등록된 리스너도 제거해야 합니다.
• 주의 사항: 모든 이벤트 리스너가 제거되었는지 확인하는 것이 중요합니다.

2. 타이머 해제:

• 컴포넌트 내에서 사용되는 타이머를 해제하여 성능 저하를 방지하는 데 사용됩니다.
• setInterval, setTimeout과 같은 함수로 생성된 타이머를 해제해야 합니다.
• 주의 사항: 해제되지 않은 타이머는 계속 실행되어 리소스를 소모하고 성능 저하를 초래할 수 있습니다.

3. API 구독 해지:

• 컴포넌트에서 사용하는 API 구독을 해지하여 불필요한 데이터 갱신과 네트워크 트래픽을 줄이는 데 사용됩니다.
• WebSocket, Server-Sent Events와 같은 API 구독을 해지해야 합니다.
• 주의 사항: 해지되지 않은 구독은 계속 데이터를 수신하여 성능 저하와 불필요한 데이터 처리를 초래할 수 있습니다.

4. 리소스 해제:

• 컴포넌트가 사용하는 모든 리소스를 해제하여 메모리 누수를 방지하고 성능 향상을 도모하는 데 사용됩니다.
• 이미지, 동영상, 캔버스와 같은 DOM 요소와 변수에 할당된 메모리를 해제해야 합니다.
• 주의 사항: 해제되지 않은 리소스는 메모리 누수를 발생시키고 애플리케이션 성능 저하를 초래할 수 있습니다.

onBeforeUnmount() 사용법:

import { onBeforeUnmount } from 'vue'

export default {
  setup() {
    onBeforeUnmount(() => {
      // 이벤트 리스너 제거, 타이머 해제, API 구독 해지, 리소스 해제 등을 수행
    })
  }
}

참고:

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

onBeforeUnmount() 활용 사례:

• 컴포넌트가 언마운트될 때 표시되는 확인 다이얼로그를 구현합니다.
• 사용자가 컴포넌트를 떠날 때 분석 데이터를 전송합니다.
• 컴포넌트 내에서 사용하는 임시 파일을 삭제합니다.
• 비디오 재생을 중지하고 메모리를 해제합니다.
• WebSocket 연결을 닫습니다.

onBeforeUnmount() 훅은 컴포넌트가 언마운트되기 전에 리소스를 정리하고 메모리 누수를 방지하는 데 중요한 역할을 합니다. 컴포넌트에서 사용하는 모든 리스너, 타이머, API 구독, DOM 요소를 해제하여 성능 향상과 안정적인 동작을 유지해야 합니다.