[Vue.js] 라이프사이클

"Vue.js 코딩 공작소" 책과

공식문서, 그 밖에 자료를 참고해 공부한

라이프사이클 내용을 정리해보겠습니다

---

1. 라이프사이클이란?

인스턴스가 생성될 때 거치는 초기화 단계(데이터 관찰 설정, 템플릿을 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM 업데이트) . 또는 호출 할 수 있는 속성들을 의미한다.

 

2. 라이프사이클 훅이란?

사용자가 특정 단계(초기화 단계)에서 자신의 코드를 추가할 수 있는 함수처럼 생각할 수 있다. 

(실제로 공식문서에서도 type이 function이다)
라이프사이클 훅에는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 등이 존재한다.

(공식문서를 보면 activated나 deactivated, erroCaptured도 사용 가능 한 것으로 보인다.)

 

3. 라이프사이클 다이어그램

Vue.js의 라이프사이클은 크게 Creation, Mounting, Updating, Destruction으로 나눌 수 있습니다.

출처: https://kr.vuejs.org/v2/guide/instance.html

1) Creation : 컴포넌트 초기화 단계

라이프사이클 중에서 가장 처음 실행되는 단계이다. 이 단계는 컴포넌트가 돔에 추가되기 전 단계이다. 

서버 렌더링에서도 지원되는 훅이다.

아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다.

이 단계에서는 beforeCreate 훅과 Created 훅이 있다.

• beforeCreate
  모든 훅 중에 가장 먼저 실행되는 훅이다. 아직 data와 events(vm.$on, vm.$once, vm.$off, vm.$emit)가 세팅되지 않은 시점이므로 접근하려고 하면 에러를 뿜어낼 것이다.
• created
  created 훅에서는 이제 data와 events가 활성화되어 접근할 수 있다. 여전히 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이다.

<script type="text/javascript">
  var APP_LOG_LIFECYCLE_EVENTS = true;
  var webstore = new Vue({
      el: '#app',
      data: {
          },
      },
      beforeCreate: function () {
        if (APP_LOG_LIFECYCLE_EVENTS) {
          console.log("beforeCreate");
        }
      },
      created: function () {
        if (APP_LOG_LIFECYCLE_EVENTS) {
          console.log("created");
        }
      }
    });
</script>

2) Mounting : 돔(DOM) 삽입 단계

Mounting 단계는 초기 렌더링 직전에 컴포넌트에 직접 접근할 수 있다. 서버렌더링에서는 지원하지 않는다.

초기 랜더링 직전에 돔을 변경하고자 한다면 이 단계를 활용할 수 있다.

그러나 컴포넌트 초기에 세팅되어야할 데이터 페치는 created 단계를 사용하는것이 낫다.

• beforeMount
  beforeMount훅은 템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행된다.
  대부분의 경우에 사용하지 않는 것이 좋다. 그리고 서버사이드 렌더링시에는 호출되지 않는다.

• mounted
  mounted 훅에서는 컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있다.
  모든 하위 컴포넌트가 마운트된 상태를 보장하지는 않는다. 서버렌더링에서는 호출되지 않는다.

<script type="text/javascript">
  var APP_LOG_LIFECYCLE_EVENTS = true;
  var webstore = new Vue({
      el: '#app',
      data: {
          },
      },
      beforeCreate: function () {
        if (APP_LOG_LIFECYCLE_EVENTS) {
          console.log("beforeCreate");
        }
      },
      created: function () {
        if (APP_LOG_LIFECYCLE_EVENTS) {
          console.log("created");
        }
      }
    });
</script>

mounted 훅에서 유의할 점은, 

부모와 자식 관계의 컴포넌트에서 우리가 생각한 순서로 mounted가 발생하지 않는다는 점이다.

출처: https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f

Created훅은 부모->자식의 순서로 실행되지만 mounted는 그렇지 않다.

현재 컴포넌트가 mount 되었다고 해서 모든 하위 구성요소도 mount 된 것을 보장하지 않는다.

만약 전체의 뷰가 렌더되는 동안에 기다리기를 바란다면 vm.$nextTick을 mounted 안에 사용할 수 있다.

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

3) Updating : Diff 및 재 렌더링 단계

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 어떤 이유로 재 렌더링이 발생되면 실행된다.

디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을때 사용하면 된다.

서버렌더링에는 호출되지 않는다.

• beforeUpdate
  이 훅은 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될때 실행된다. 정확히는 돔이 재 렌더링되고 패치되기 직전에 실행된다. 재 렌더링 전의 새 상태의 데이터를 얻을 수 있고 더 많은 변경이 가능하다. 이 변경으로 이한 재 렌더링은 트리거되지 않는다.

• updated
  이 훅은 컴포넌트의 데이터가 변하여 재 렌더링이 일어나 후에 실행된다. 돔이 업데이트 완료된 상태이므로 돔 종속적인 연산을 할 수 있다. 그러나 여기서 상태를 변경하면 무한루프에 빠질 수 있다. 모든 자식 컴포넌트의 재 렌더링 상태를 보장하지는 않는다.

<script type="text/javascript">
  var APP_LOG_LIFECYCLE_EVENTS = true;
  var webstore = new Vue({
      el: '#app',
      data: {
          },
      },
      beforeUpdate: function () {
        if (APP_LOG_LIFECYCLE_EVENTS) {
          console.log("beforeUpdate");
        }
      },
      updated: function () {
        if (APP_LOG_LIFECYCLE_EVENTS) {
          console.log("updated");
        }
      }
    });
</script>

4) Destruction: 해체 단계

컴포넌트가 파괴될 때 수행된다. 컴포넌트가 해체되어 DOM에서 제거되면 실행된다.

• beforeDestroy
  이 훅은 해체(뷰 인스턴스 제거)되기 직전에 호출된다.
  컴포넌트는 원래 모습과 모든 기능들을 그대로 가지고 있다. 이벤트 리스너를 제거하거나 reactive subscription을 제거하고자 한다면 이 훅이 제격이다. 서버 렌더링시 호출되지 않는다.
• destroyed
  이 훅은 해체(뷰 인스턴스 제거)된 후에 호출된다.
  Vue 인스턴스의 모든 디렉티브가 바인딩 해제 되고 모든 이벤트 리스너가 제거되며 모든 하위 Vue 인스턴스도 삭제된다. 서버 렌더링시 호출되지 않는다.

- 참고사이트
- Vue.js 2.0 라이프사이클 이해하기

- Vue.js의 Lifecycle hooks

- Vue.js 공식문서

 

---

라이프사이클을 알고있다면

다양한 구현 방안을 고안해낼 수 있을거같습니다😊