Vue.js 라이프 사이클(LifeCycle)

https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

Lifecycle Hooks | Vue.js

https://joshua1988.github.io/vue-camp/vue/life-cycle.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%92%E1%85%AE%E1%86%A8

Instance Lifecycle | Cracking Vue.js

- Vue.js Lifecycle

생명주기가 중요한이유, 각 단계마다 Hook을 걸 수 있는데 그에따라 동작 방식을 정할 수 있다.

 

이걸 라이프 사이클 훅 이라고 한다. 종류가 많지만 많이쓰는거 created, beforeMount, mounted, destroyed가

 

가장 많이 쓰인다고 하고 오늘은 mounted랑 created를 알아보았다.

 

1)mounted(){} 훅 - 해당 컴포넌트가 만들어진 다음에 실행 , setTimeout()함수

 

아래에서 할인 배너가 2초뒤면 사라지게 만들고 싶다. mounted훅과 setTimeout함수를 같이 써주었다.

 

마찬가지로 UI상태를 boolean형태로 만들어 주어 v-if문을 써주었고 App.vue에 mounted()를 생성해준 다음

 

그 안에서 setTimeout을 아래와 같이 만들어 주었다.

...

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

...

  mounted(){
    // App.vue가 mount된 후에 실행하고 싶으면 여기다가 만든다.
    // 즉 각 컴포넌트에 만들면 된다.
    setTimeout(()=>{
      // 화살표 함수를 써야한다. 그래 바로 위에있는 this를 쓸 수있다.
      this.showDiscount = false;
    },2000);

  },
  
  .....

 

2)created(){} 훅 - 서버에서 데이터 가져올 때도 lifecycle hook안에서짠다.

 

3.beforeUpdate() {} 훅

Modal 컴포넌트에서 2개월을 입력하면 경고창이 뜨게 만들기, watcher을 써또 되지만

lifecycle hook으로도 가능하다. 데이터가 변경되면 HTML(컴포넌트)가 재렌더링 된다.

라이프 사이클 중에 update부분이다. 즉 beforeUpdate훅을 걸어 만들 수 있다.

.......
    beforeUpdate(){
      if(this.month==2){
        alert('2개월은 안됩니다.')
        this.month = 3;
      }
    },

 

4.mounted훅에서 setInterval()함수 사용

mounted훅에서 두가지 함수를 둘다 써보았다. 둘다 화살표 함수를 사용해 줘야하고 (this 사용 위함)

 

특히 setInterval의 경우 특정 시간초마다 실행하는 함수이다. 편의상 시간이 지날수록 5퍼부터 0퍼까지

 

할인되는 창을 띄우게 설정해 놓았고 간단한 사용법은 아래 코드와 같다.

1)변수에다가 setInterval함수를 할당한다. (그래야 나중에 지울 수 있다.)

 

2)특정 조건이 달성되면 clearInterval함수로 할당된 변수를 삭제한다.

 

3)만약 지울 필요가 없다면 변수할당으로 안해도 되지만 어떤 문제를 일으킬지몰라 보통 소멸시키는게 정석 이라고 한다.

    let timerA = setInterval(()=>{
      this.amount--;
      if(this.amount===0){
        clearInterval(timerA);
      }
    },1000)

 

- mounted 함수에서 두가지 시간함수를 동시에 사용한 코드

  mounted(){
    // App.vue가 mount된 후에 실행하고 싶으면 여기다가 만든다.
    // 즉 각 컴포넌트에 만들면 된다.
    setTimeout(()=>{
      // 화살표 함수를 써야한다. 그래 바로 위에있는 this를 쓸 수있다.
      this.showDiscount = false;
    },2000);
    let timerA = setInterval(()=>{
      this.amount--;
      if(this.amount===0){
        clearInterval(timerA);
      }
    },1000)
    // timerA();
    // 이렇게 쓰면 안되네..! 여튼 수고

  },