[Vue.JS] 라이프 사이클

Vue.JS의 라이프 사이클은 Vue.JS 어플리케이션을 구현할 때 빼 놓을 수 없는, 빼 놓고는 Vue.JS 어플리케이션을 개발하기 힘든, 매우 중요한 개념입니다. Vue.JS의 라이프 사이클은 크게 Create, Mount, Update, Destory로 나눌 수 있습니다.

Vue.JS의 라이프 사이클

1. Create

Vue.JS의 라이프 사이클들 중에 가장 먼저 실행됩니다. create 단계에서 실행되는 라이프 사이클 훅(hook)들은 컴포넌트가 DOM에 추가 되기 전이기 때문에, DOM에 접근하거나 this.$el을 사용할 수 없습니다. 컴포넌트가 DOM에 추가 되기 전에 호출 되기 때문에 서버 사이드 렌더링에서도 지원되는 훅입니다. Create 단계에서 호출되는 라이프 사이클 훅들은 beforeCreate와 created가 있습니다.

beforeCreate

Vue.JS의 라이프 사이클 훅 중에서 가장 먼저 실행 되는 훅입니다. data와 이벤트($on, $once, $off, $emit), 감시자($watch)등이 설정 되기 전에 호출되는 라이프 사이클 훅입니다.

export default {
  data() {
    return {
      title: 'Vue.JS'
    };
  }
  beforeCreate() {
    // data(this.title)와 이벤트($on ...) 감시자($watch)를 사용할 수 없습니다.
    console.log('beforeCreate');
  }
}

CodePen에서 beforeCreate 라이프 사이클 훅 결과를 확인 할 수 있습니다.

created

data, computed, methods, watch 등과 같은 옵션 설정이 완료된 시점이기 때문에, data 등을 사용할 수 있습니다. 하지만 아직 DOM에 컴포넌트가 마운트 되지 않았기 때문에 $el은 사용할 수 없습니다.

export default {
  data() {
    return {
      title: 'Vue.JS'
    };
  },
  computed: {
    titleComputed() {
      return 'After Computed : ' + this.title;
    }
  },
  created() {
    // data(this.title), computed(this.titleComputed), methods... 등을 사용할 수 있지만,
    // DOM이 마운팅 되기 전이기 때문에 $el은 사용할 수 없습니다.
    console.log(this.title, this.titleComputed);
  }
}

CodePen에서 created 라이프 사이클 훅 결과를 확인 할 수 있습니다.

2. Mount

컴포넌트가 DOM에 추가될 때, 실행되는 라이프 사이클 훅입니다. 서버 사이드 렌더링을 지원하지 않습니다. 렌더링이 될 때 DOM을 변경하고 싶다면 이 라이프 사이클 훅을 사용할 수 있습니다. 하지만 컴포넌트 초기에 data가 세팅되어야 한다면, created 라이프 사이클 훅을 사용하는 것이 좋습니다. Mount 단계에서 호출되는 라이프 사이클 훅들은 beforeMount와 mounted가 있습니다.

beforeMount

컴포넌트가 DOM에 추가 되기 직전에 실행되는 훅입니다. 서버 사이드 렌더링을 지원하지 않습니다. 컴포넌트 초기에 data가 세팅되어야 한다면 created 라이프 사이클 훅을, 렌더링 되고 DOM을 변경해야 한다면 mounted 라이프 사이클 훅을 사용하면 되기 때문에, 거의 사용하지 않는 라이프 사이클 훅입니다.

export default  {
  beforeMount() {
    // $el은 아직 사용할 수 없습니다.
  }
}

CodePen에서 beforeMount 라이프 사이클 훅 결과를 확인 할 수 있습니다.

mounted

컴포넌트가 DOM에 추가 된 후 호출되는 라이프 사이클 훅입니다. 서버 사이드 렌더링은 지원하지 않습니다. $el을 사용하여 DOM에 접근 할 수 있습니다. mounted 훅이 호출되었다고 모든 컴포넌트가 마운트 되었다고 보장할 수는 없습니다. 전체가 렌더링 보장된 상태에서 작업을 하기 위해서는 $nextTick을 사용해야 합니다.

export default {
  mounted() {
    // $el 을 사용할 수 있습니다.
    console.log('mounted', this.$el);
    this.$nextTick(() => {
      // 모든 화면이 렌더링된 후 호출됩니다.
    });
  }
}

CodePen에서 mounted 라이프 사이클 훅 결과를 확인 할 수 있습니다.

자식 컴포넌트의 mounted 훅이 부모 컴포넌트의 mounted 훅 보다 먼저 실행됩니다.

자식 컴포넌트의 Mounted 훅이 부모의 Mounted 훅 보다 먼저 실행됩니다.

위의 그림을 보면 쉽게 이해 하실 수 있습니다. created 훅은 부모 -> 자식 순으로 호출 되지만, mounted 훅은 자식 -> 부모 순으로 호출됩니다. 즉 부모 컴포넌트는 자식 컴포넌트가 모두 DOM에 추가 된 후에야 mounted 훅이 실행됩니다.

const Child = {
  template: '<div>Child</div>',
  mounted() {
    console.log('Child Component Mounted');
  }
}

new Vue({
  el: '#app',
  mounted() {
    console.log('Parent Component Mounted');
  },
  components: {
    Child
  }
});

CodePen에서 위 예제의 실행 결과를 확인 할 수 있습니다.

3. Update

컴포넌트에서 사용되는 속성들이 변경되는 등의.. 컴포넌트가 재 랜더링 되면 실행되는 라이프 사이클 훅입니다. 컴포넌트가 재 렌더링 될 때, 변경 된 값으로 어떠한 작업을 해야 할 때 유용하게 사용 되는 훅입니다. 서버 사이드 렌더링은 지원하지 않습니다.

beforeUpdate

DOM이 재 렌더링 되기 직전에 호출되는 라이프 사이클 훅입니다. 업데이트 된 값들을 가지고 있는 상태이기 때문에, 업데이트 된 값으로 다른 값들을 업데이트 할 수 있습니다. 이 훅에서 값이 변경되더라도 다시 beforeUpdate 훅이 호출 되지 않기 때문에, 무한 루프에 빠질 걱정은 하지 않으셔도 됩니다.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

CodePen에서 beforeUpdate 훅 예제를 확인 할 수 있습니다.

updated

DOM이 재 렌더링 된 후 호출되는 라이프 사이클 훅입니다. DOM이 업데이트 된 후 호출 되는 훅이기 때문에 변경 된 후의 DOM을 이용해야 하는 처리를 할 때 사용하기 유용한 훅입니다. mounted 훅과 마찬가지로 재 렌더링이 끝났다는 것이 보장된 상태에서 작업하기 위해서는 $nextTick을 사용해야 합니다. beforeUpdate 훅과 다르게 updated 훅에서 data를 수정하게 되면 update 훅이 호출 되기 때문에 무한 루프에 빠질 수 있으니 유의해야 합니다.

export default {
  updated() {
    console.log('updated');
    this.$nextTick(function () {
      // 모든 화면이 렌더링된 후 실행합니다.
    });
  }
}

CodePen에서 updated 훅 예제를 확인 할 수 있습니다.

4. Destroy

컴포넌트가 제거 될 때 실행되는 라이프 사이클 훅입니다.

beforeDestroy

컴포넌트가 제거 되기 직전에 호출되는 라이프 사이클 훅입니다. 이 훅에서 컴포넌트는 본래의 기능들을 가지고 있는 온전한 상태입니다. 이 훅에서 이벤트 리스너를 해제하거나 컴포넌트에서 동작으로 할당 받은 자원들은 해제해야 할 때 사용하기 적합한 훅입니다. 서버 사이드 렌더링을 지원하지 않습니다.

export default {
  beforeDestroy() {
    console.log('beforeDestory');
  }
}

CodePen에서 beforeDestroy 훅 예제를 확인 할 수 있습니다.

destroyed

컴포넌트가 제거 된 후 호출되는 라이프 사이클 훅입니다. 컴포넌트의 모든 이벤트 리스너(@click, @change 등..)와 디렉티브(v-model, v-show 등..)의 바인딩이 해제 되고, 하위 컴포넌트도 모두 제거됩니다. 서버 사이드 렌더링을 지원하지 않습니다.

export default {
  destroyed() {
    console.log('destroyed');
  }
}

CodePen에서 destroyed 훅 예제를 확인 할 수 있습니다.

5. GitHub 소스 확인

Vue.JS 라이프 사이클 예제는 https://github.com/beomy/vue-life-cycle에서 확인 할 수 있습니다.

참고

• https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4