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

 

 

Vue 공식문서에서 확인할 수 있는 이미지와 같이 Vue 인스턴스는 크게 4가지 과정을 거치게 되는데, 그 4가지에는 Created(생성), Mounted(DOM에 부착), Update(업데이트), Destroy(소멸) 이 있음.

Vue는 각각의 프로세스에서 Vue를 사용하는 사람들을 위해 Hook을 할 수 있도록 API를 제공하는데, 일반적으로 많이 사용하는 것에는 beforeCreated, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 등이 있음.

 

---

beforeCreated 

가장 먼저 실행되는 훅인 beforeCreated는 Vue인스턴스가 초기화 된 직후에 발생됨. 컴포넌트가 DOM에 추가되기 전이기 때문에 data, methods에 접근 불가능

 

created

created훅에서는 data를 반응형으로 추적할 수 있게 되며 computed, methods, watch등이 활성화되어 접근이 가능하게 되지만, 아직 DOM에는 추가되기 전임.data에 직접 접근이 가능하기 때문에, 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅해야 하거나 이벤트 리스너를 선언해야 한다면 이 단계에서 하는 것이 가장 적절함.

 

beforeMount

DOM에 부착하기 직전에 호출되는 beforeMount훅은 이 단계 전에서 템플릿이 있는지 없는지 확인한 후 템플릿을 렌더링 한 상태이므로, 가상 DOM이 생성되어 있으나 실제 DOM에 부착되지는 않은 상태임.

mounted

일반적으로 가장 많이 사용하는 mounted훅은 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로, this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능함.일반적으로 부모와 자식 컴포넌트 간의 mounted훅 순서는 자식 컴포넌트의 mounted 훅 이후에 부모 컴포넌트의 mounted 훅이 발생하는데, 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼 부모의 mounted훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않음. 따라서 'this.$nextTick'를 이용하면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장할 수 있음.

 

beforeUpdate 

컴포넌트에서 사용되는 data의 값이 변해서, DOM에도 그 변화를 적용시켜야 할 때가 있는데, 변화 직전에 호출되는 것이 beforeUpdate 훅임. 변할 값을 이용해 가상 DOM을 렌더링하기 전이지만, 이 값을 이용해서 작업은 가능하며, 이 훅에서 값들을 추가적으로 변화시키더라도 렌더링을 추가로 호출하지는 않음.

 

updated

updated훅은 가상 DOM을 렌더링하고 실제 DOM이 변경된 이후에 호출됨. 변경된 data가 DOM에도 적용된 상태이기에 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면, updated훅이 가장 적절함.다만, data를 이 훅에서 변경하는 것은 무한 루프를 일으킬 수 있으므로 이 훅에서는 데이터를 직접 바꾸어서는 안되며,mounted훅과 마찬가지로 'this.$nextTick'을 이용하여 모든 화면이 업데이트된 이후의 상태를 보장할 수 있음.

 

beforeDestroy

해당 인스턴스가 해체되기 직전에 beforeDestroy훅이 호출됨. 아직 헤체되기 이전이므로, 인스턴스는 완전하게 작동하기 때무네 모든 속성에 접근이 가능함. 이 단계에서는 이벤트 리스너를 해데하는 등 인스턴스가 사라지기 전에 해야할 일들을 처리하면 됨.

 

destroyed

인스턴스가 해체되고 난 직후에 destroyed훅이 호출 됨. 해체가 끝난 이후이기 때문에 인스턴스의 속성에 접근할 수 없으며, 하위 Vue인스턴스 역시 삭제됨.