[Vue.js] 13. Vue의 lifecycle

1. 라이프사이클이란?

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

 

 

2. 라이프사이클

1. create: 데이터만 존재하는 단계
2. mount: <template> 사이에 있는 코드를 실제 HTML로 변경
3. 컴포넌트 생성: index.html에 장착
4. update: 데이터가 변경되면 HTML이 재렌더링되는데, 실제로는 <컴포넌트>가 재렌더링되는 것
5. unmount: 컴포넌트가 삭제

 

3. 라이프사이클 훅이란?

: 라이프사이클 중간중간마다 원하는 코드를 실행하도록 함

 

 

4. 라이프사이클 훅 종류

• beforeCreate()
• created()
• beforeMount()
• mounted()
• beforeUpdate()
• updated()
• beforeUnmount()unmounted()
• ...

 

 

ex) 페이지 실행 후 2초 뒤에 사라지는 할인베너

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

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

 

 

* 서버에서 데이터를 가져올 때도 라이프사이클 훅 안에서 코드 작성

 

ex). 20초 후에 사라지는 할인베너

<!-- App.vue -->
<template>
	<Discount v-if="showDiscount" :second="second" />
</template>

<script>
import Discount from './components/Discount.vue';
export default {
    name: 'App',
    data() {
        return {
            ...
            showDiscount: true,
            second: 20,
        };
    },
    methods: {
        ...
    },
    created() {
        if (this.showDiscount) {
            setInterval(() => { // 1초마다 second값이 1씩 감소
                this.second--;
            }, 1000);
        }
    },
    mounted() {
        setTimeout(() => {
            this.showDiscount = false; // 20초 후 showDiscount값이 false가 되면서 베너 삭제
        }, 20000);
    },
    components: { Discount },
};
</script>

<!-- Discount.vue -->
<template>
    <div class="discount">
        <h4>
            지금 결제시 20% 할인 <span>({{ second }}초 후 닫힘)</span>
        </h4>
    </div>
</template>

<script>
export default {
    name: 'Discount-banner',
    props: {
        second: Number,
    },
};
</script>