[Vue3] Vue 컴포지션 API: 생명주기 훅 정리

1. 마운트 관련 훅

• onBeforeMount(callback)
  • 설명: 컴포넌트가 DOM에 마운트 되기 직전에 호출됨.
  • 용도: 초기 렌더링 전에 준비할 작업을 실행할 때 사용.
• onMounted(callback)
  • 설명: 컴포넌트가 DOM에 마운트 된 후 호출됨.
  • 용도: DOM에 접근해야 하거나, 외부 라이브러리 초기화 등 마운트 이후 작업을 처리할 때 사용.
  • 예제:

    import { onMounted } from 'vue';
    
    onMounted(() => {
      console.log('컴포넌트가 마운트되었습니다.');
    });
    

2. 업데이트 관련 훅

• onBeforeUpdate(callback)
  • 설명: 컴포넌트의 반응형 데이터가 변경되어 DOM 업데이트가 일어나기 전 호출됨.
  • 용도: 업데이트 전 마지막 상태를 참고하거나, 업데이트 전 준비 작업 시 사용.
• onUpdated(callback)
  • 설명: DOM이 업데이트 된 후 호출됨.
  • 용도: 업데이트된 DOM에 기반한 후처리 작업(예, 애니메이션 재설정 등)에 활용.
  • 예제:

    import { onUpdated } from 'vue';
    
    onUpdated(() => {
      console.log('컴포넌트가 업데이트되었습니다.');
    });
    

3. 언마운트 관련 훅

• onBeforeUnmount(callback)
  • 설명: 컴포넌트가 제거되기 직전에 호출됨.
  • 용도: 제거되기 전에 구독 해제, 타이머 클리어 등 정리 작업에 사용.
• onUnmounted(callback)
  • 설명: 컴포넌트가 DOM에서 제거된 후 호출됨.
  • 용도: 후처리 작업이나 메모리 해제 등 컴포넌트 종료 후 처리해야 할 작업에 활용.
  • 예제:

    import { onBeforeUnmount, onUnmounted } from 'vue';
    
    onBeforeUnmount(() => {
      console.log('컴포넌트가 제거되기 직전입니다.');
    });
    
    onUnmounted(() => {
      console.log('컴포넌트가 제거되었습니다.');
    });
    

4. 활성화/비활성화 훅 (keep-alive 컴포넌트)

• onActivated(callback)
  • 설명: keep-alive로 감싼 컴포넌트가 활성화(보여질 때)될 때 호출됨.
  • 용도: 컴포넌트가 다시 활성화 될 때 실행할 작업을 정의.
• onDeactivated(callback)
  • 설명: keep-alive로 감싼 컴포넌트가 비활성화(숨겨질 때)될 때 호출됨.
  • 용도: 비활성화 시 상태 저장이나 정리 작업에 사용.
  • 예제:

    import { onActivated, onDeactivated } from 'vue';
    
    onActivated(() => {
      console.log('컴포넌트가 활성화되었습니다.');
    });
    
    onDeactivated(() => {
      console.log('컴포넌트가 비활성화되었습니다.');
    });
    

5. 에러 처리 훅

• onErrorCaptured(callback)
  • 설명: 하위 컴포넌트에서 에러가 발생했을 때 호출되며, 에러 전파를 제어할 수 있음.
  • 용도: 컴포넌트 내부 또는 하위 컴포넌트에서 발생한 예외를 포착하여 로깅하거나, 사용자에게 알릴 때 사용.
  • 예제:

    import { onErrorCaptured } from 'vue';
    
    onErrorCaptured((err, instance, info) => {
      console.error('에러 발생:', err);
      // 에러 전파 중단하려면 false를 반환
      return false;
    });
    

6. 렌더링 디버깅 훅 (추적용)

• onRenderTracked(callback)
  • 설명: 반응형 시스템이 어떤 의존성을 추적하는지 확인할 수 있음.
  • 용도: 주로 디버깅 목적으로 사용.
• onRenderTriggered(callback)
  • 설명: 반응형 데이터 변경에 의해 렌더링이 트리거 될 때 호출됨.
  • 용도: 렌더링 트리거의 원인을 추적할 때 사용.

---

활용 팁

• setup() 내부에서 호출: 모든 생명주기 훅은 setup() 함수 내부에서 사용해야 합니다.
• 컴포넌트 분리: Composition API를 활용하면 관련 로직을 별도의 함수로 분리하여 재사용할 수 있습니다.
• 정리 작업: onBeforeUnmount와 onUnmounted 훅을 이용해 이벤트 리스너 제거, 타이머 클리어 등 컴포넌트 종료 시 반드시 필요한 정리 작업을 수행합니다.

---

정리

Vue 컴포지션 API의 생명주기 훅은 Options API에서 제공하는 기능을 함수 형태로 제공하여, 더 유연하고 모듈화된 방식으로 컴포넌트의 라이프사이클을 관리할 수 있게 해줍니다. 각 훅의 역할과 시점을 잘 이해하면, 컴포넌트의 생성, 갱신, 제거 시에 필요한 작업들을 명확하게 분리하여 작성할 수 있습니다.

참고

https://ko.vuejs.org/api/composition-api-lifecycle