Vue Life Cycle
프론트엔드 개발관련 공부내용을 기록하는 포스트 입니다.
1. 개요
Vue 에는 인스턴스생명주기 가 존재한다.
이는 Vue Component 가 생성되고 최종 소멸될떄까지의 주기를 말한다.
이런 라이프사이클을 이해해야지 Hook 의 사용도 좀 더 이해력있게 사용할 수 있을것이다. 또한, 각 시점에 해야하는 로직과 작업이 있기 때문에 그부분을 알기 위해서라도 이해는 필수 일 것 같다.
2. Vue Life Cycle(인스턴스 생명주기)
Vue 의 생명주기에는 크게 4가지로 나눌 수 있다.
- Created
- Mounted
- Updated
- Destroy
크게는 4가지지만 그 안에 여러 단계의 Hook 이 존재한다.
각 Hook 에 대한 정리가 필요할 것 같다.
2-1. BeforeCreate
가장 먼저 실행되는 단계인 beforeCreate Hook 는 Vue 인스턴스 가 초기화된 직후 발 생한다.
이 시점에는 el 즉, DOM 과 같은 화면 요소에 접근할 수 없고 data, event, watcher 접근하기 전이기 때문에 data, methods 에도 접근할 수 없다.
2-2. Created
Created 단계에서는 computed, methods, watch 등의 기능이 활성화 되어 접근이 가능하다. 또한 data 에 접근이 가능하기에 data 셋팅 및 이벤트 리스너 선언에 좋은 시점이다.
또한, 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋은 시점이다.
2-3. BeforeMount
Template 속성에 지정되어 있는 마크업 속성을 render() 함수를 통해 변환한 후 el 속성에 지정한 DOM에 인스턴스를 부착하기 전에 호출되는 단계이다.
즉, 가상 DOM 이 생성되어 있으나, 실제 DOM 에 부착되지 않은 상태를 말한다.
이 시점에는 render() 함수가 호출되기 직전의 로직을 추가하는 것이 좋다.
2-4. mounted
가장 많이 사용하는 시점이며 가상의 DOM의 내용이 실제 DOM 에 부착되고 난 뒤에 실행되는 Hook 으로 this.$el, data, computed, methods, watch 등 모든 요소에 접근이 가능하다.
부모와 자식 component 간의 mounted hook 순서는 아래 그림과 같다.
부모 component 의 mounted hook 은 항상 자식 component 의 mounted hook 이후에 발생한다.
하지만, 모든 경우에 부모의 mounted hook 이 자식 component이 마운트 된 상태를 보장하지는 않는다.
예를들어 자식 컴포넌트가 비동기로 데이터를 받아오는 경우가 있을 것이다.
하지만 이런 상황에서 상태를 보장받고 싶을때는 this.$nextTick 을 이요한다면, 모든 화면이 렌더링된 이후에 실행되므로 mounted 상태를 보장할 수 있다.
이 시점은 화면 요소(DOM)를 제어하는 로직을 수행하기 좋은 단계로 이해하면 된다.
2-5. BeforeUpdate
component 에서 사용되는 data 를 $watch속성으로 관찰 중 data 가 변경이되면 페이지는 재 렌더링 할 것이다.
이때 재랜더링 하기 전에 BeforeUpdate Hook 이 실행된다.
즉, DOM 을 다시 그리기 전에 호출되며, 변경 예정인 데이터를 가지고 있는 단계이기에 이 값을 활용한 로직을 작성하기 좋은 시점이다.
2-6. Updated
데이터가 변경되어 가상 DOM 에서 렌더링 후 실제 DOM 이 변경된 이후에 호출되는 훅이며, 변경된 data 가 실제 DOM 에 적용된 상태이다.
만약 변경된 값들을 DOM 을 이용해 접근하려면 updated 훅이 가장 적절하다.
주의할점은 이 시점에서 data 를 변경하게 되면 무한루프를 일으킬 수 있으므로 훅에서는 데이터를 직접 바꾸면 안된다.
mounted hook 과 마찬가지로 this.$nextTick 을 이용해 모든 화면이 업데이트 된 이후의 상태를 보장할 수 있다.
2-7. beforeDestroy
생성된 instance 가 해체되기 직전에 호출되며, 인스턴스의 모든 요소 및 속성에 접근이 가능하다.
이 단계에서는 이벤트 리스너 해제 와 같은 인스턴스가 사라지기 전에 해야할 일들을 처리하면 된다.
2-8. destoryed
인스턴스가 해체되고 난 후에 호출되며, 해체가 끝난 이후이기 때문에 인스턴스 속성에 접근할 수 없다.
또한, 하위 Vue 인스턴스 역시 삭제된다.
3. 정리
처음 vue 개발을 진행할때 다양한 시점 즉, Hook 들을 크게 고려하지 않고 개발을 해왔다. 하지만, 공부를 하면 할수록 각 시점에 행해져야 할 작업들을 알게되고 점점복잡해질수록 이런 Hook 의 기능을 잘 알고 적용할 줄 알아야 할 것 같다.
참고 사이트
https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html
Gatsby router 활용에 대한 포스트 입니다.