Vue3 - 컴포넌트 생명주기 (Composition API)

컴포넌트 생명주기(Component LifeCycle)

Vue3에서 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 파괴되기까지의 여러 단계를 설명하는 개념이다. 각 단계는 특정 시점에 호출되는 라이프사이클 훅을 가지고, 이를 통해 개발자가 컴포넌트의 생성, 업데이트, 파괴 등의 과정에서 필요한 코드를 실행할 수 있다. 

Composition API의 주요 라이프사이클 훅

라이프사이클 훅	설명
setup()	Composition API의 일부로 beforeCreate(생성 전)와 created(생성 후)훅 사이에 호출된다. 이 단계에서 props, state, method를 정의하고 라이프사이클 훅을 사용할 수 있다.
onBeforeMount()	컴포넌트가 마운트되기 직전에 호출된다. 이 시점에서는 아직 DOM에 컴포넌트가 마운트되기 전이므로, DOM을 조작할 수 없다.
onMounted()	컴포넌트가 마운트된 직후에 호출된다. 이 시점에서는 컴포넌트가 DOM에 추가 되었으므로, DOM 요소에 접근하거나 조작할 수 있다.
onBeforeUpdated()	반응형 데이터에 의해 컴포넌트가 업데이트되기 전에 호출된다. 이 훅은 DOM이 업데이트되기 전에 호출되므로, 현재 DOM 상태에 접근할 수 있다.
onUpdated()	컴포넌트가 업데이트된 후에 호출된다. 이 시점에서는 데이터 변경에 의한 DOM 업데이트가 완료된 상태이다.
onBeforeUnmount()	컴포넌트가 언마운트되기 직전에 호출된다. 이 훅은 컴포넌트가 제거되기 전에 필요한 정리 작업을 수행하는데 사용할 수 있다.
onUnmounted()	컴포넌트가 완전히 언마운트된 후에 호출된다. 이 시점에서는 컴포넌트가 DOM에서 완전히 제거된 상태이다.

Vue3는 Composition API를 사용해서 위와 같은 라이프사이클 훅을 setup() 함수 내에서 직접 사용할 수 있다. 예를 들어, onMounted 훅을 사용해서 컴포넌트가 마운트된 후에 실행할 코드를 정의할 수 있다. 

라이프사이클 훅을 사용함으로써, 컴포넌트의 생명주기에 따른 정밀한 제어가 가능해지고, 다양한 상황에서 원하는 동작을 구현할 수 있다.