[Vue.js] Document 따라하기 - Lifecycle Hooks

각 Vue component 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다. 그 과정에서 수명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여 특정 단계에서 개발자의 의도가 담긴 코드를 추가할 수 있는 기회를 제공한다.

 

Registering Lifecycle Hooks

예를 들어, mounted 훅은 component가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있다.

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

Lifecycle Hooks

Lifecycle Hooks

인스턴스 수명 주기의 여러 단계에서 호출되는 다른 훅도 있으며 가장 일반적으로 사용되는 것은 mounted, updated, unmounted다.

모든 수명 주기 훅은 호출하는 현재 활성 인스턴스를 가리키는 this 컨텍스트로 호출된다. 이것은 수명 주기 훅을 선언할 때 화살표 함수를 사용하면 this를 통해 component 인스턴스에 접근할 수 없기에 화살표 함수를 사용하면 안 된다는 것을 의미한다.

 

Lifecycle Diagram

다음은 인스턴스 수명 주기에 대한 다이어그램이다. 지금 진행 중인 모든 것을 완전히 이해할 필요는 없지만 더 많이 배우고 구축함에 따라 유용한 참고 자료가 될 것이다.

출처 https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

수명 주기 훅의 모든 종류와 사용 사례에 대한 자세한 내용은 수명 주기 API 참조.

 

관련 Repo

https://github.com/galaxyuliana/VueExercises/tree/master/first-vue-project/src/components/Exercise/09

 

참고 자료

https://vuejs.org/guide/essentials/lifecycle.html