[Vue] Vue의 기초(9) - Lifecycle(라이프사이클), Hooks

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

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

create단계는 데이터만 존재하는 단계,

mount단계는 <template>사이에 있던걸 실제 HTML로 바꿔주고

그 다음에 컴포넌트 생성단계에서 index.html에 장착한다.

data가 변하면 <컴포넌트>가 재렌더링되는 update단계.

컴포넌트가 삭제되면 unmount단계.

 

 Hooks

 

라이프사이클(생명주기)은 Hook을 걸어서 중간에 원하는 코드를 실행가능하다. (예: mount 전에실행, update(재렌더링) 이전에 실행). lifecycle hook을 쓰려면 beforeCreate(), created(), beforeMount(), mounted(), beforeUpdate(), updated(), beforeUnmount(), unmounted()을 <script>에 쓰면 된다. 

 

Discount 배너를 2초 후에 사라지게 만들기 위해 먼저 UI의 현재 상태를 showDiscount : true로 만들어두고 컴포넌트에 v-if 조건문으로 true일 때만 보이게 만든다. setTimeout()을 hook에 사용해서 mount되고 난 뒤 false로 바꾸게 한다. App.vue(메인페이지)에 mount()를 사용하면 App.vue가 mount되고나서 코드가 실행이 된다.

<template>
  <Discount v-if="showDiscount == true" />
</template>

<script>
import Discount from './Discount';

export default {
  name: 'App',
  data(){
    return {
      showDiscount : true,
    }
  },
  mounted(){
    setTimeout(()=>{
      this.showDiscount = false;
    }, 2000);
  },
  components: {
    Discount,
  }
}
</script>

서버에서 데이터가져올 때도 lifecycle hook 안에 코드를 짜는데, craeted() 훅에 HTML 생성전 데이터만 존재할 때 서버에서 데이터가져오는 코드를 AJAX로 요청한다.

 

setInterval(), clearInterval()

일정한 시간 간격으로 작업을 수행하기 위해 사용된다. 예를들어, 메인페이지를 방문하자마자 할인 상품 구매 시간이 30초에서 1초씩 감소하기 위해서는 아래의 코드를, setInterval()를 제거하기 위해서는 clearInterval()을 사용하면 된다.

 

<template>
  <p>할인까지 남은 시간 : {{saleCount}}초</p>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      saleCount : 30,
    }
  },
  mounted(){
    var timer = setInterval(()=>{
      this.saleCount--;
      if(this.saleCount==0){
        clearInterval(timer);
      }
    }, 1000);
  },
}
</script>

 

beforeUpdate

input에 2를 기입했을 때 알림창 alert()를 띄울 때 watcher도 가능하지만 lifecycle hook을 이용해 보겠다. v-model을 사용하면 $event.target.value 입력값을 가지고 올 수 있다. beforeUpdate()를 통해 변경될 때 alert를 띄우고 3으로 값을 변경해준다.

 

iancoding.tistory.com/207

[Vue] Vue의 기초(6) - 이벤트리스너 v-model, watcher

<template>
  <input v-model="month">
</template>

<script>
export default {
    name : 'Modal',
    data(){
        return {
            month : 1,
        }
    },
    beforeUpdate(){
      if(this.month==2){
        alert('3개월 이상 입력하세요!')
        this.month = 3;
      }
    },
}
</script>