[Vue.js] Vue Instance LifeCycle(생명주기)

[Vue.js] Vue Instance LifeCycle(생명주기)

---

Vue Instance 생성

모든 Vue application은 Vue Instance를 생성함으로써 시작된다. 아래와 같이 생성한다.

var vm = new Vue({
  // options
})

위 options 부분에는 아래와 같은 property를 지정할 수 있다.

• Data에 대한 options
  ㄴ data, props, propsData, computed, methods, watch
• DOM에 대한 options
  ㄴ el, template, render, renderError
• Lifecycle Hook에 대한 options
  ㄴ beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed, errorCaptured
• Asets에 대한 options
  ㄴ directives, filters, components
• Composition에 대한 options
  ㄴ parent, minxins, extends, provide/inject
• Misc에 대한 options
  ㄴ name, delimiters, functional, model, inheritAttrs, comments

이번 포스팅에서는 이 중에서 Lifecycle Hook에 대해서 다뤄보려고 한다. 그 전에 Lifecycle과 관련 있는 Data에 대해서 먼저 정리하고 넘어가자

---

Data and Methods

Vue Instance가 생성되면 data property에 있는 모든 속성들은 Vue의 반응형 시스템에 추가된다.

Vue의 Reactive System(반응형 시스템)

vue는 가장 큰 특징 중 하나는 반응형 시스템을 가진다는 것이다. Model 즉 데이터는 기본적으로 plain Javascript Object이다. 그래서 데이터를 수정하게 되면, 출력 부분(view)은 자동으로 바뀌게 된다.
자세한 내용은 Vue 공식 사이트의 Reactivity in Depth를 참고하자

어쨌든 이제 Vue에서 값이 변경되는 것을 계속 감시해서 view단에서 변경이 적용되게 하려면 data 속성을 이용해야 하는 것을 알았다.

// 우리가 반응형 시스템에서 쓰고자 하는 데이터
var data = { a: 1 }

// 이곳에서 준비한 데이터를 data property에 지정해준다.
// (참고로 왼쪽 data는 option이고 오른쪽 데이터는 위에서 준비한 Data이다.)
var vm = new Vue({
  data: data
})

// 이제 인스턴스에 data가 지정되었기 때문에 준비한 데이터와 같다.
vm.a == data.a // => true

// 인스턴스의 property를 변경하면 original data에 영향을 준다.
vm.a = 2
data.a // => 2

// ... and vice-versa
data.a = 3
vm.a // => 3

위의 예제에서 Vue의 option 부분의 data property에 원하는 데이터를 지정해주기만 하면 된다.

아래와 같이 개별적으로 변수를 정의한다면, view에 변화가 없으므로 반드시 data property에 지정하도록 하자.

vm.b = 'hi'

// correct use example
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

---

Instance Lifecycle Hooks

각각의 Vue Instance는 일련의 초기화 단계를 거치는데, 그 과정에서 개발자가 정의한 로직을 수행할 수 있는 부분인 Lifecycle Hook이 존재한다.
Lifecycle Hook은 아래와 같이 크게는 8개가 존재한다.
위에서는 activated, deactivated, errorCaptured도 언급했었는데, 여기서는 우선 가장 핵심적인 8개만 보도록 하자

1. beforeCreate
   컴포넌트가 DOM에 추가되기 전의 단계이다. 그러므로 아직 data와 event(vm.$on, vm.$once, vm.$off, vm.$emit)가 셋팅되기 전이므로 DOM에 접근하거나 data와 event를 조작할 수 없다.

2. created
   data와 event가 셋팅되는 부분이다. 따라서 data와 event를 다룰 수는 있지만, 아직 DOM에 마운트되지 않았기 때문에, DOM 조작은 할 수 없다.
   보통 이 단계에서 axios같은 http 통신을 통해서 서버로부터 데이터를 받아서 셋팅한다.

3. beforeMount
   템플릿과 렌더 함수들이 컴파일 된 후, 첫 렌더링 되기 직전에 실행되는 부분이다. 대부분의 경우 사용하지 않는 것이 좋다고 한다.

4. mounted
   컴포넌트, 템플릿, 렌더링된 DOM에 접근 가능하다. 하지만 모든 하위 컴포넌트들이 렌더링되었다고 보장할 수는 없다.
   참고로 Parent 컴포넌트와 Child 컴포넌트의 마운팅 순서는 Child 컴포넌트가 먼저 마운팅 되고 그 후에 Parent 컴포넌트가 마운팅된다.

5. beforeUpdate

6. updated

7. beforeDestroy

8. destroyed