Composition API Lifecycle hooks

- 라이프 사이클(lifecycle)

Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계

 

- 라이프 사이클 훅(lifecycle hooks)

각 라이프 사이클 단계에서 실행되는 함수들

 

Composition API에서 각각의 훅은 setup() 내부에서 onXX 형태로 접근 가능

Composition API의 생명주기 훅은 Option API와 다르게 beforeCreate와 created가 없음 <= 마운트 되기 전에 처리되는 작업들은 setup에서 처리하면 되기 때문

 

- onBeforeMount

setup으로 인한 반응형 상태 설정 완료된 상태

DOM 노드 생성 전

 

- onMounted

컴포넌트가 마운트된 이후 호출 

렌더링된 DOM에 접근해서 특정 작업을 할 때 사용

뷰가 아닌 라이브러리를 통합할 때 사용

자식 > 부모 순으로 mounted hooks가 실행

 

- onBeforeUpdate

반응형 상태가 변함에 따라 DOM tree를 업데

이트 하기 전에 호출

가상 DOM이 렌더링, 패치되기 전에 데이터가 변경될 때 호출

여기서 DOM 접근해서 읽기 용도로 사용, 써도 반영 되지 않음

컴포넌트 상태 값을 바꾸면 DOM에 반영됨, 무한반복 되지 않음

이 단계에서 추가적인 상태 변경을 수행할 수 있지만 다시 렌더링 되지는 않음

 

- onUpdated

반응형 상태 변함에 따라 DOM tree를 업데이트한 이후 호출

자식 컴포넌트의 Update 훅 이후 실행

데이터 변경으로 가상 DOM이 다시 렌더링 되고 패치된 후에 호출됨

이 훅이 호출된 시점은 컴포넌트의 DOM이 업데이트된 상태이므로 DOM에 종속적인 작업 가능

 

- onBeforeUnmount

마운트 해제 전에 호출(Vue 객체가 제거되기 전에 호출)

마운트 해체 전이기 때문에 인스턴스의 데이터나 함수 등 모두 사용 가능

 

- onUnmounted

컴포넌트가 마운트 해제된 이후 호출

모든 자식 컴포넌트들도 마운트 해제됨

setup 과정에서 생성된 반응성 효과(computed, watcher 포함) 중지

사용자 정의로 작성했던 timer 등에 대한 중지 처리

이벤트 리스너나 서버, DB 연결 등을 수동으로 정리하는데 사용

 

 

- 라이프 사이클 과정

1. Creation: 컴포넌트 초기화 단계

creation hooks는 라이프 사이클에서 가장 먼저 실행

컴포넌트가 DOM에 추가되기 전에 수행하며 다른 훅과 달리 서버 렌더링 중에도 실행됨

클라이언트 렌더링 및 서버 렌더링 과정에서 모두에서 컴포넌트를 설정할 필요가 있다면 이 단계에서 처리

컴포넌트가 DOM에 추가되기 전이기 때문에 DOM에 접근 불가능

라이프 사이클 훅: Option API에선 beforeCreate와 create, Composition API에선 setup

 

2. Mounting: DOM 삽입 단계

Mounting hooks는 가장 많이 사용되며 초기 렌더링 전후에 즉시 컴포넌트에 액세스 할 수 있음

서버 측 렌더링이 실행되는 동안에는 실행되지 않음

라이프 사이클 훅: onBeforeMount, onMounted

 

3. Updating: Diff 및 Re-rendering 단계

컴포넌트에서 사용하는 반응형 속성들이 변경되거나 리렌더링될 때마다 호출됨

디버깅이나 프로파일링을 위해 컴포넌트가 다시 렌더링되는 시기를 알아야 하는 경우 사용

(컴포넌트의 반응형 속성들이 언제 변경되는지 알아야 하는 경우에는 computed나 watch를 사용)

라이프 사이클 훅: onBeforeUpdate, onUpdated

 

4. Unmounted: 해체 단계

컴포넌트가 해체되고 DOM에서 제거될 때 실행됨

라이프 사이클 훅: onBeforeUnmount, onUnmounted

 

 

 

 

 

 

참고:

https://vue-log.com/post/36fa4e88-3a4e-4ae4-a06c-f036a6aeefcc

[Vue 3] Composition API - Lifecycle Hook

https://goodteacher.tistory.com/543

[vue 3] Vue 객체의 라이프 사이클

https://velog.io/@yeyo0x0/Vue.js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%ED%9B%85

[Vue.js] 라이프사이클 훅