Vue3 Lifecyle Hooks

Yeeun_Kim·2024년 3월 4일

Vue의 생명 주기 훅

각 Vue 컴포넌트 인스턴스는 생성될 때 일려의 초기화 단계를 거친다. 데이터 감시를 설정하거나 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트 해야 한다. 이 과정에서 생명 주기 훅(Lifecyle Hooks)이라 불리는 함수를 실행함으로 특정 단계에서 개발자가 의도하는 로직이 실행되도록 한다.

Composition API

컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API이다.

setup 메소드에서 액세스 할 수 있는 API

onBeforeMount: 컴포넌트가 마운트되기 직전에 호출될 훅

onMounted: 컴포넌트가 마운트된 후 호출될 콜백

onBeforeUpdate: 반응형 상태 변경으로 컴포넌트의 DOM 트리를 업데이트하기 직전에 호출될 콜백

onUpdated:반응형 상태 변경으로 컴포넌트의 DOM 트리가 업데이트된 후 호출될 콜백

onBeforeUnmount: 컴포넌트 인스턴스가 마운트 해제되기 직전에 호출될 콜백

onUnmounted: 컴포넌트가 마운트 해제된 후 호출될 콜백

onActivated: 보관된 구성 요소가 활성화되면 호출

onDeactivated: 보관된 구성 요소가 비활성화되면 호출

onErrorCaptured: 자식 컴포넌트에서 전파된 에러가 캡쳐되었을 때 호출될 콜백

Lifecyle Hooks

[출처: https://ko.vuejs.org/guide/essentials/lifecycle.html]

1. Creation Hooks

breforeCreate와 created는 모두 setup() 메서드로 대체된다.

import { ref } from 'vue'
export default {
  setup() {
    const val = ref('hello')
    console.log('Value of val is: ' + val.value) 
    return {
      val,
    }
  },
}
//결과 => Value of val is: hello

2. Mounting Hooks

Mounting Hooks는 Component Mounting 및 Rendering을 처리한다.

1) beforeMount()와 onBeforeMount()

컴포넌트 DOM이 실제로 렌더링되고 마운트되기 직전에 호출. 이 단계에서는 Root Element가 아직 존재하지 않는다. Options API에서 this.$el을 사용하여 액세스할 수 있고, Composition API에서는 ref를 사용해야 한다.

Composition API

import { onBeforeMount } from 'vue'
export default {
  setup() {
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
  },
}

Option API

export default {
  beforeMount() {
    console.log("onBeforeMount");
  }
}

2) mounted()와 onMounted()

Component의 첫 번째 렌더링 직후에 호출된다. 이 단계에서는 직접 DOM 액세스를 허용하는 요소를 사용할 수 있다. Options API에서는 $el을 사용하여 DOM에 액세스하고, Composition API에서 Vue 라이프사이클 훅의 DOM에 액세스하려면 ref를 사용해야 한다.

Composition API

import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log("onMounted");
    });
  },
}

Option API

export default {
  mounted() {
    console.log("mounted");
  }
}

3. Update Hooks

업데이트된 Lifecycle event는 반응형 데이터(Reactive Data)가 수정될 때마다 트리거되어 렌더 업데이트를 트리거된다.

1) beforeUpdate()와 onBeforeUpdate()

데이터가 변경될 때 Component가 다시 렌더링되기 전에 실행된다. 변경 사항이 발생하기 전에 DOM을 수동으로 업데이트하기에 좋은 곳이다.

Composition API

import { onBeforeUpdate } from 'vue'
export default {
  setup() {
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
  },
}

Option API

export default {
  beforeUpdate() {
    console.log("beforeUpdate");
  }
}

2) updated()와 onUpdated()

DOM이 업데이트되면 업데이트된 메서드가 호출하게 된다.

Composition API

import { onUpdated } from 'vue'
export default {
  setup() {
    onUpdated(() => {
      console.log("onUpdated");
    });
  },
}

Option API

export default {
  updated() {
    console.log("updated");
  }
}

4. Destruction Hooks

Component를 제거하고, 허술하게 남은 것들을 모두 치우는 과정에서 사용된다. 제대로 처리되지 않으면 메모리 누수를 유발할 수 있는 이벤트 리스너와 항목을 제거하게 된다

1) beforeUnmounted()와 onBeforeUnmounted()

해당 단계는 Component가 분해되기 전이기 때문에, 전부는 아니더라도 대부분의 정리 작업을 수행해야 할 때이다. 이 단계에서 구성 요소는 여전히 완전히 작동하며 아직 손상된 것은 없다.

Composition API

import { onBeforeUnmounted } from 'vue'
export default {
  setup() {
    onBeforeUnmounted(() => {
      console.log("onBeforeUnmounted");
    });
  },
}

Option API

export default {
  beforeUnmounted() {
    console.log("beforeUnmounted");
  }
}

2) unmounted()와 onUnmounted()

이 시점에서 대부분의 구성 요소와 구성 요소의 속성이 사라지므로 수행할 수 있는 작업이 많지 않다. 다시 한 번, 일부 데이터를 스캔하여 정확히 무엇이 남아 있는지, 프로젝트에 유용할 수 있는지 확인하는 단계이다.

Composition API

import { onUnmounted } from 'vue'
export default {
  setup() {
    onUnmounted(() => {
      console.log("onUnmounted");
    });
  },
}

Option API

export default {
  unmounted() {
    console.log("unmounted");
  }
}

회고

회사에서 Vue3를 사용하게 되며 개발을 학습을 병행하며 라이프 사이클에 대한 이해도가 중요하다고 생각되어 이렇게 글을 쓰게 되었다. Vue2에서 Vue3로 넘어가면서 Composition API가 등장하게 되었고, 코드를 보다 깔끔하고 효율적으로 로직을 재사용할 수 있게 되었다. 보다 효율적인 코드를 위해서 Composition API를 적극 사용하여 개발을 진행해야 겠다는 생각을 하게되었다.