[vue.js] vue 인스턴스 생명주기 (life cycle)

생명주기?

  인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기(life cycle) 이라고 합니다. 그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(life cycle hook) 이라고 합니다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가집니다. 속성의 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 로 총 8개입니다. 아래에서 하나하나 살펴볼까요?

1. beforeCreate

> 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이 때는 뷰 인스턴스의 data 와 methods 속성이 정의되어 있지않고 화면 요소(ex. dom) 에도 접근할 수 없으니까 주의하세요!

2. created

> 이 단계에는 data 속성과 methods 속성이 정의되었기 때문에 두 속성값에 접근하는 로직을 구현하셔도 됩니다. 하지만 아직 화면 요소에 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근하는 코드를 구현할 수는 없습니다.

3. beforeMount

> render() 함수가 호출되기 직전의 단계입니다. created 이후에 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전 호출되기 때문에 화면에 붙이기 전 실행해야 할 코드를 구현하시면 됩니다.

4. mounted

> el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후 호출되는 단계입니다. tgemplate 속성에 정의한 화면 요소에 접근할 수 있기 때문에 화면 요소를 제어하는 코드를 구현하시면 됩니다. 주의하실 것은 돔에 인스턴스가 부착되자마자 호출되기 때문에 하우 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과는 다를 수 있습니다.

5. beforeUpdate

> el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후에 인스턴스 속성들이 화면에 치환됩니다. 이  치환된 값을 $watch 속성으로 감시하는데요, 이러한 작업을 데이터 관찰이라고 합니다. 이렇게 관찰하고 있는 데이터들이 변경되면 가상 돔을 이용해 화면에 다시 그려야 합니다. 이 때, 그리기 직전 호출되는 단계가 beforeUpdate 입니다. 따라서 변경 예정인 데이터 값을 이용해 작업을 해야할 때 그 로직을 이 단계에서 구현하시면 됩니다. 또한 그 값을 변경하는 로직을 구현하셔도 다시 화면에 그려지지는 않습니다. 

6. updated

> beforeUpdate 가 끝나고 화면에 다시 그리고 나면 실행되는 단계입니다. 데이터가 변경되고 화면 요소를 제어하는 것을 구현하고 싶을 때 이 단계에서 작업하시면 됩니다. 하지만 이 단계에서 그 값을 또 변경하면 무한 루프에 빠질 수 있습니다. 왜냐하면 여기서 값을 변경하면 다시 beforeUpdate -> updated (또 값 변경) -> beforeUpdate -> ... 이렇게 무한루프가 되기 때문입니다. 따라서 데이터 값을 갱신하는 로직은 beforeUpdate 에서 처리해주시길 바랍니다.

7. beforeDestroy

> 뷰 인스턴스가 destroy 되기 직전에 호출되는 단계입니다. 이 단계에서는 아직 인스턴스가 없어지지 않았기 때문에 접근 가능하며 뷰 인스턴스의 데이터를 삭제하거나 인스턴스가 사라지기 직전 해야하는 작업들을 구현하시면 됩니다. 

8. destroyed

> 뷰 인스턴스가 destroy 되고 난 후 호출되는 단계입니다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스들 역시 모두 destroy 됩니다. 

코드

  실제 코드에서는 뷰 객체 내에서 속성으로 추가하시면 됩니다. 아래는 예제 코드입니다.

<template>

<div id="app">

{{message}}

</div>

</template>

<script>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

},

beforeCreate: function () {

console.log('beforeCreate');

},

created: function () {

console.log('created');

},

mounted: function () {

console.log('mounted');

},

updated: function () {

console.log('updated');

}

})

</script>

이상으로 뷰 인스턴스의 생명주기에 대해 알아보았습니다 :)

참고 : do it! vue.js 입문 도서