Vue) 13. vue Lifecycle Hook // 라이프사이클

준영·2022년 8월 5일

lifecycle vue vue.js vue3 라이프사이클 뷰

React 유저의 Vue 공부 도전..

목록 보기

14/23

Lifecycle이란 Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계를 말한다.

그리고 각 단계에서 실행되는 함수들을 Lifecycle Hook이라고 부른다.

라이프 사이클 플로우차트 )

각 단계별 훅 설명 )

beforeCreate

컴포넌트를 초기화하는 단계로 아직 어떠한 데이터와 이벤트가 설정되지 않은 단계이다.

created

템플릿(html) 및 Virtual DOM이 마운팅 혹은 렌더링 되기 전에 실행된다. 이 단계부터 데이터와 이벤트가 활성화되어 접근할 수 있다.
부모 -> 자식 순서로 created 훅이 실행된다.

beforeMount

템플릿 및 랜더함수가 컴파일 된 후, 랜더링이 일어나기 직전의 단계이다.

mounted

랜더링 직후의 단계이고 컴포넌트, 템플릿, 랜더링된 DOM에 접근이 가능하며 수정하기 위해 사용한다.
부모 -> 자식 순서로 mounted 훅이 실행된다.

beforeUpdate

컴포넌트의 데이터가 변경되고 업데이트 주기가 시작된 후, DOM이 fetch되고 리랜더링하기 직전의 단계이다.

updated

리랜더링을 한 뒤의 단계이며, property가 변경된 후 DOM에 접근해야 할 때 사용한다.

beforeDestroyed

소멸 직전에 실행되는 단계이며, 컴포넌트는 아직 완전하게 존재하고 작동한다.

destroyed

컴포넌트가 소멸된 후의 단계이다.

몇몇 사용 예제들 )

1. 페이지가 랜더링하고 2초 뒤, 할인 배너를 보여주자..

템플릿 코드 )

<!-- 배너광고 -->
<DiscountBanner v-if="showDiscountValid === true" />

스크립트 코드 )

data(){
  return{
    showDiscountValid: false,
  }
},
mounted() {
  setTimeout(() => {
    this.showDiscountValid = true;
  }, 2000);
},

🙋🏻‍♂️ 라이프사이클 훅의 사용법은 데이터나 함수 상자를 만드는 것과 비슷하다.

"원하는 단계의 훅의 이름" + ( ){ "내용물" }

배너를 보여 줄 boolean의 자료형태인 showDiscountValid를 데이터 상자에 초깃값은 false로 선언 해 주었다.

그런다음 템플릿의 <DiscountBanner> 컴포넌트를 v-if를 통해여 true일 때 보여주는 조건부 랜더링을 하였다.

마지막으로 mounted 훅을 사용하여 setTimeout()를 이용해 2초 뒤, showDiscountValid 값을 true로 바꿧다.

2. 할인 배너의 할인률을 1초마다 1% 씩 떨어지게 해보자..

템플릿 코드 )

<template>
  <!-- 배너 광고 -->
  <div class="discount">
    <h4>지금 결제하시면, {{ percent }}% 할인!!</h4>
  </div>
</template>

스크립트 코드 )

export default {
  name: "DiscountBanner",
  data() {
    return {
      percent: 10,
    };
  },
  mounted() {
    var timer = setInterval(() => {
      this.percent--;
      if (this.percent == 0) {
        // timer라는 변수에 담아서 clearInterval 함수로 종료
        clearInterval(timer);
      }
    }, 1000);
  },
};