Vue3에서의 라이프사이클 훅 변화 정리

– Options API에서 Composition API로의 변화 중심으로 –

Vue는 컴포넌트의 생성부터 소멸까지 다양한 라이프사이클 훅(Lifecycle Hooks)을 제공합니다. Vue2에서는 Options API를 통해 각 훅을 created, mounted, updated 등으로 정의했지만, Vue3에서는 Composition API에 맞춰 onMounted, onUpdated 등의 함수형 API를 도입했습니다.

Vue2의 라이프사이클 훅 예시

export default {
  created() {
    console.log('컴포넌트가 생성되었습니다.')
  },
  mounted() {
    console.log('컴포넌트가 마운트되었습니다.')
  },
  updated() {
    console.log('컴포넌트가 업데이트되었습니다.')
  },
  destroyed() {
    console.log('컴포넌트가 제거되었습니다.')
  }
}

Vue3 Composition API 방식

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('마운트 완료')
    })

    onUpdated(() => {
      console.log('업데이트 완료')
    })

    onUnmounted(() => {
      console.log('언마운트 완료')
    })
  }
}

주요 특징:

• setup() 함수 내부에서 선언
• 함수로 사용되므로 로직을 재사용하기 편함
• 여러 번 호출해도 각각 독립적으로 실행됨

Vue3에서 사용할 수 있는 주요 라이프사이클 훅 목록

훅 이름	설명
onBeforeMount	DOM이 마운트되기 직전에 호출
onMounted	DOM이 마운트된 후에 호출
onBeforeUpdate	반응형 데이터가 변경되었지만 DOM이 업데이트되기 전에 호출
onUpdated	DOM이 업데이트된 후에 호출
onBeforeUnmount	컴포넌트가 언마운트되기 전에 호출
onUnmounted	컴포넌트가 언마운트된 후에 호출
onActivated	<keep-alive>에서 컴포넌트가 활성화될 때 호출
onDeactivated	<keep-alive>에서 컴포넌트가 비활성화될 때 호출
onErrorCaptured	하위 컴포넌트의 오류를 캡처할 때 호출

Tip: 커스텀 훅처럼 활용하기

Vue3의 라이프사이클 훅은 함수형이기 때문에, 로직을 재사용하는 커스텀 훅 형태로도 활용할 수 있습니다.

// useLogger.js
import { onMounted, onUnmounted } from 'vue'

export function useLogger(name) {
  onMounted(() => console.log(`${name} 마운트됨`))
  onUnmounted(() => console.log(`${name} 언마운트됨`))
}

// 컴포넌트 내부
import { useLogger } from './useLogger'

export default {
  setup() {
    useLogger('MyComponent')
  }
}

마무리 정리

Vue2에서는 라이프사이클 훅을 옵션으로 작성했지만, Vue3에서는 함수형으로 사용합니다. Composition API에 최적화되어 있으며, 재사용성과 가독성이 향상되었습니다. 각 훅은 setup() 함수 안에서만 사용 가능하다는 점을 꼭 기억하세요.