[Vue] 라이프사이클 Lifecycle, Hook

라이프사이클 (생명주기)

컴포넌트는 웹페이지에 표시되기까지 일련의 step을 거친다.
이것을 라이프사이클이라고 한다.

1. create 단계 : 데이터만 존재하는 단계
2. mount 단계 : 컴포넌트 안의 HTML을 실제 HTML로 바꿔주는 단계
3. 컴포넌트 생성 : HTML에 장착하는 단계
4. update 단계 : data가 변경되어 재렌더링 되는 것
5. unmount 단계 : 컴포넌트가 사라짐

Lifecycle Hook

이 단계 중간 중간에 Hook을 걸 수 있다.

예를 들면
컴포넌트가 mount 되기 전에 이것(Hook)을 실행해주세요.
컴포넌트가 update되기 전에 이것(Hook)을 실행해주세요.

Hook 사용 방법

export default {
  name: 'App',
  mounted(){
  },
}

Lifecycle Hook 종류

• beforeCreate()
• created()
• beforeMount() : mount되기 전
• mounted() : mount된 후
• beforeUpdate()
• update()
• beforeUnmount()
• unmounted() 등

예제

3초 후 DiscountBanner 삭제

App.vue

<DiscountBanner v-if="showDiscountBanner == true" />

name: 'App',
data(){
  return {
    showDiscountBanner: true,
  }
},
// App.vue 가 mount 되었을 때 실행
mounted(){
  setTimeout(() => {
    this.showDiscountBanner = false;
  }, 3000);
},

서버에서 데이터 가져올 때도 Lifecycle Hook 안에 코드를 짠다.
보통 created(), mounted() 에다가 짠다.

---

참고

• [Vue.js

  LifeCycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html#onmounted)