뷰 라이프사이클이란?

 life cycle, 인스턴스의 생명 주기

 

vue 라이프사이클이란 vue의 인스턴스가 생성된 순간부터 종료될 때까지의 순환되는 주기를 말한다.  인스턴스는 이 과정에서 다양한 단계를 가지고, 개발자는 이를 이용해 화면과 데이터를 컨트롤 한다. 따라서 생명 주기 단계 마다 어떤 일들이 일어나는 지 이해하고 개발하는 것이 중요하다. 라이프사이클 단계 마다 메서드를 사용해 개발자가 원하는 커스텀 로직을 수행할 수 있기 때문에 vue는 따로 Controller를 가지고 있지 않다.

 

 

 

 

 그림으로 보는 라이프사이클

 

 

new Vue()뷰 인스턴스 생성

Init Events & Lifecycle이벤트와 라이프사이클 초기화

① beforeCreate인스턴스가 초기화된 직후, 데이터 관찰 및 이벤트/감시자 설정 전에 동기식으로 호출된다. data와 methods속성이 정의 되기 전이고, DOM에도 접근 불가

Init injections & reactivity화면에 반응성 주입

② created인스턴스가 생성된 후 동기적으로 호출된다. 이 단계에서 인스턴스는 옵션처리가 완료되어, data observation, computed properties, methods, watch/event callbacks이 설정되어 있다. 아직 $el속성은 사용할 수 없다.

Has "el" option?el 속성을 가지고 있는 지 확인

Has "template" option?template 속성을 가지고 있는 지 확인

Compile template into render functiontemplate 속성 내용을 render 함수로 변환

Compile el's outerHTML as templatetemplate으로 컴파일

③ beforeMount마운트가 시작되기 직전에 호출된다. render 함수가 처음 호출되므로, 화면 붙이기 직전 수행해야할 로직을 구현한다.

Create vm.$el and replace "el" with it$el 생성 후 el 속성 값을 대입

④ mounted인스턴스가 화면에 마운트된 직후, t emplate 속성에 접근 가능하다. 전체 뷰가 렌더링 될 때까지 기다리려면 vm.$nextTick을 이용하면 된다. 

⑤ beforeUpdate데이터를 관찰하다가 데이터가 변경되면, 가상돔을 이용해 화면에 다시 그리는데, 그리기 직전 호출되는 단계. 업데이트 전에 기존 DOM에 엑세스하기 좋은 곳

Virtual DOM re-render and patch데이터가 변경되는 경우

⑥ updatedbeforeUpdate가 끝나고 호출되면 가상 DO이 다시 렌더링되고 패치된다. 데이터 변경 후 화면 요소를 제어하고 싶을 때 이 단계에서 로직 구현한다. 이 단계에서 또 데이터를 변경하면 다시 beforeUpdate를 호출해 무한 루프에 빠질 수 있으므로, 상태 변경에 대응하려면 watch 또는 computed를 사용하는 것이 좋다. 마찬가지로 전체 뷰가 렌더링될 때까지 기다리려면 vm.$nextTick을 사용하면 된다.

# activatedkept-alive component가 활성화될 때 호출된다. 

# deactivatedkept-alive component가 비활성화될 때 호출된다

⑦ beforeDestory뷰 인스턴스가 destroy 되기 직전 호출되는 단계이다. 인스턴스가 없어지지 않았기 때문에 접근 가능하므로, 인스턴스가 사라지기 직전에 해야하는 로직 구현한다. 

Teardown watchers, child components and event listeners

⑧ destoryed뷰 인스턴스가 destory 되고 난 후 호출되는 단계. 뷰 인스턴스에서 정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스들 모두 destory된다.

 

 

 

 

 

 

 정리

 

라이프사이클을 이해하기 전에 대충 mounted에다가 로직을 써서 개발하다가 삽질을 한 적이 있다. 뷰를 막 시작한 개발자라면, 위 라이프사이클을 순서대로 로그를 찍어 결과를 보면 이해가 훨씬 수월할 것 같다. 라이프 사이클 이해는 필수, 꼭 추천!

 

 

 

 

 자료 출처

 

[라이프사이클 후크] -  youtu.be/aY1TCdRWGfUvuejs.org/v2/api/#Options-Lifecycle-Hooks