라이프사이클이란, Vue컴포넌트 인스턴스가 화면에 보이고 사라지는 일련의 과정을 뜻하며 크게 Creation -> Mounting -> Updates -> Destruction 로 구분된다. Vue3 에서 이러한 라이프사이클은 이벤트가 발생하기 전/후로 호출되며 각 단계별로 2개의 hook으로 분리되기 때문에 총 8개의 메인훅이 존재한다.
하지만, Composition API 를 사용한다면, setup 매서드 안에서 9개의 라이프 사이클 훅을 통해 특정 이벤트를 실행할 수 있다.
그 중 onMounted(), onUpdated(), onActivated() 훅에 대해 알아보자.
onMounted()
컴포넌트가 마운팅 될 때 호출된다.
즉, SPA 구조에서 최상위 컴포넌트인 App.vue 인스턴스가 생성된 후 index.html 의 body 에 DOM이 부착되며, 특정 컴포넌트가 화면에 렌더링 되어 우리 눈에 보이는 시점이다.
어플리케이션이 상위 컴포넌트 > 하위 컴포넌트로 네스팅 된 구조라면, 하위 컴포넌트가 mounted 된 이후에 상위 컴포넌트의 onMounted hook 이 실행된다.
// App.vue
<template>
<router-view v-slot="{ Component }">
<keep-alive include="Index">
<component
:is="Component"
/>
</keep-alive>
</router-view>
<loading-page />
</template>- keep-alive 내에서 컴포넌트의 전환이 일어난다면, mounted hook은 컴포넌트 첫 진입 시에만 실행되고 동일 컴포넌트로 다시 진입한다고 해도 재랜더링 되지 않는다. 그 이유는 keep-alive는 인스턴스를 캐싱하고 있기 때문이며 사용하지 않는 컴포넌트를 잠시 비활성화시켰다가 재진입 시점에서 캐싱된 인스턴스를 상위 체인에 표시하는 것이다.
- 컴포넌트가 keep-alive 내에서 전환되면, onActivated 와 deActivated hook이 호출된다.
onUpdated()
반응형 state 데이터가 변경될 때 호출된다.
컴포넌트의 DOM 구조가 변경된 이후에 실행되는 hook으로 네스팅 컴포넌트 구조에서는 하위 컴포넌트의 updated() hook 이 호출된 이후에 상위 컴포넌트의 updated hook이 실행된다. 따라서 하위 컴포넌트와 상위의 state 변경이 일어날 때, 데이터가 업데이트 됨에 따라 바인딩 된 변수값이 제대로 업데이트 되지 않거나 DOM을 다시 그리는 경우 의도치 않는 UI가 구현될 수 있다. 상위<->하위 컴포넌트 간 데이터 바인딩 및 DOM이 업데이트 되는 시점 차이 때문에 발생하며, 이런 경우 nextTick() 을 통해 DOM 업데이트를 지연시켜 코드를 동기적으로 실행시키는 것과 같은 효과를 얻을 수 있다.
네스팅 된 컴포넌트 구조에서, 하위 컴포넌트가 updated() 된 이후에 상위 컴포넌트의 onUpdated hook 이 실행된다.
onActivated()
컴포넌트 인스턴스가 DOM에 부착될 때 호출된다.
onActivated() 사용하기 위해서는 컴포넌트가 keep-alive 내부에서 렌더링 되어야 하며, 마운팅 된 돔에 부착될 때의 사이클이기 때문에 mounted hook 실행 뒤에 호출된다.
설명한 3가지 hook은 server side rendering에서는 지원되지 않는다는 공통점이 존재한다.
각각의 사이클 hook의 정확한 호출시점이 헷갈린다면 console.log()를 이용하여 시점을 정확하게 파악해보는 것을 추천한다. 특히, 상위-하위 간 네스팅 된 컴포넌트 구조에서 컴포넌트의 생성-마운트-업데이트-소멸 의 사이클을 숙지하면 더할 나위가 없을 것이다.
참고
