[Vue3] Vue 컴포넌트의 생명주기 훅

Vue 컴포넌트의 생명주기 훅은 컴포넌트의 생성부터 소멸까지의 일련의 과정에서 실행되는 함수입니다. 이 함수들은 컴포넌트의 초기화, 업데이트, 해제와 관련된 작업을 특정 시점에 수행할 수 있도록 도와줍니다.

 

Vue에서 생명주기 훅을 사용하는 방법은 Options API와 Composition API에서 다소 차이가 있습니다.

 

• Options API에서 생명주기 훅 함수 사용법

Options API에서는 컴포넌트 내부에 생명주기 훅 함수를 정의하고, 그 안에 필요한 로직을 작성합니다. 예를 들어, mounted 훅을 사용하면 컴포넌트가 DOM에 마운트된 후에 실행되는 로직을 작성할 수 있습니다.

mounted() {
  // 컴포넌트가 DOM에 마운트된 후 실행될 로직
}

 

• Composition API에서 생명주기 훅 함수 사용법

Composition API에서는 setup 함수 내부에서 각 생명주기 훅 함수에 on을 붙여 사용합니다.

setup() {
 onMounted(() => {
	// 컴포넌트가 DOM에 마운트된 후 실행될 로직
 })
}

 

생명주기 훅 중에서 몇 가지 주요한 훅을 살펴보겠습니다.

 

• beforeCreate

컴포넌트가 생성되기 전에 호출됩니다. Options API에서는 beforeCreate 훅을 사용하고, Composition API에서는 setup 함수 자체가 beforeCreate를 대체합니다. 이 시점에서는 컴포넌트의 데이터나 메서드에 접근할 수 없습니다.

 

• created

컴포넌트가 생성된 후에 호출됩니다. Options API에서는 created 훅을 사용하고, Composition API에서는 beforeCreate와 마찬가지로 setup 함수가 created를 대체합니다. 이 시점에서는 컴포넌트의 데이터와 메서드에 접근할 수 있지만, 실제 DOM은 아직 마운트되지 않은 상태입니다. 주로 초기 데이터 로딩이나 비동기 작업을 처리하는 데 사용됩니다.

 

• beforeMount

컴포넌트가 DOM에 마운트되기 전에 호출됩니다. 이 시점에서는 가상 DOM이 생성되고 실제 DOM이 구성되기 전의 로직을 실행할 수 있습니다.

 

• mounted

컴포넌트의 구성요소들이 실제 DOM에 마운트된 후 호출됩니다. 가상 DOM이 실제 DOM에 렌더링되고 컴포넌트가 화면에 나타난 후의 로직을 실행할 수 있습니다. 실제 DOM 요소를 조작할 수 있는 시점입니다.

 

• beforeUpdate

컴포넌트의 데이터가 변경되고 재렌더링되기 전에 호출됩니다.

 

• updated

컴포넌트의 데이터가 변경되고 재렌더링된 후 호출됩니다. 이 시점에서 실제 DOM이 업데이트되며, 로직을 처리할 수 있습니다. 다만 자식 컴포넌트의 업데이트가 완료되었음을 보장하지는 않기 때문에 만약 모든 자식 컴포넌트의 업데이트가 완료된 이후에 실행하고 싶은 로직이 있다면 nextTick을 사용할 수 있습니다.

updated() {
	this.$nextTick(() => {
    // 자식 컴포넌트의 업데이트가 완료된 후 실행될 로직
  })
}

 

• beforeUnmount

컴포넌트가 해제되기 전에 호출됩니다. 컴포넌트가 해제되기 전에 필요한 정리 작업을 실행할 수 있습니다.

 

• unmounted

컴포넌트가 해제된 후 호출되며, 모든 디렉티브와 이벤트의 사용이 불가능해집니다.

 

• errorCaptured

자식 컴포넌트에서 발생한 에러를 감지하고 처리할 수 있습니다.

 

이러한 생명주기 훅 함수를 활용하면 컴포넌트의 초기화, 업데이트, 해제와 관련된 작업을 원하는 시점에 처리할 수 있습니다. 이를 통해 컴포넌트의 동작을 세밀하게 제어하고 상태 변화에 따른 로직을 처리할 수 있습니다.