위의 다이어그램은 vue.js 홈페이지에서 참조한 다이어그램이다.
해당 라이프 사이클을 확인해보도록 하자.
<template>
<div ref="rDiv">{{ message }}</div>
<p><input type="text" @input="changeMessage" /></p>
<button @click="changeInputText">클릭시 메시지 변경!</button>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello World!!",
inputText: "",
};
},
methods: {
changeMessage(e) {
this.inputText = e.target.value;
},
changeInputText() {
this.message = this.inputText;
},
},
beforeCreate() {
console.log("beforeCreate", this.message);
},
created() {
console.log("created", this.message);
},
beforeMount() {
console.log("beforeMount", this.message);
},
mounted() {
console.log("mounted", this.message, this.$refs.rDiv.innerText);
},
beforeUpdate() {
console.log("beforeUpdate", this.$refs.rDiv.innerText);
},
updated() {
console.log("updated", this.$refs.rDiv.innerText);
},
beforeUnmount() {
console.log("beforeUnmount", this.$refs.rDiv.innerText);
},
unmounted() {
console.log("unmounted", this.$refs.rDiv, this.inputText);
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
코드를 작성한 모습이다. 위의 코드를 아직 이해하지 못해도 상관없다. vue를 공부하기 전에 이런 라이프사이클이 있다는것을 알아두기 위한 것이다.
beforeCreate : 인스턴스가 생성되고 동작하는 라이프 사이클이다.
created : 인스턴스에 존재하는 method나 data등의 값들을 인식할 수 있다.
beforeMount : 마운티드가 시작하기전에 호출.
mounted : 마운티드가 된 후에 호출된다. 이때부터 DOM 조작이 가능하다.
beforeUpdate : DOM이 변경되기 전에 호출.
updated : DOM이 변경 된 후 호출.
beforeUnmount : 언마운트 되기전에 호출.
unmounted : 언마운트 된 후에 호출.
위의 내용은 쉽게 이해를 하기 위하여 필자가 핵심적인 내용만 정리한 내용이다.
더 자세한 내용과 추가적인 라이프 사이클은 https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html를 참고.
위의 라이프 사이클중에서도 자주 사용되는 라이프 사이클은
created, mounted, unmounted 정도이다. 이 3가지 정도만 알아도 vue를 사용하는데는 큰 어려움이 없을거라고 생각된다. 그렇지만 일단 나열한 라이프 사이클을 모두 확인해보도록 하자.
위의 코드를 실행하였을 때 나오는 첫 콘솔이다.
beforeCreate는 data의 값을 사용할 수 없다.
created 부터 data에 선언 된 값들을 사용할 수 있다.
beforeMounted는 마운티드 되기 전인데 이때는 DOM을 인식할 수 없다.
mounted와 똑같은 코드를 입력하게 된다면 에러가 날 것이다.
mounted부터 DOM의 innerText를 사용할 수 있다.
위의 모습은 Test라는 값을 입력하여 message의 값을 변경 한 것이다.
beforedUpdated에서는 이전의 innerText 값을 가져오며, updated에서는 변경된 innerText의 값을 가져온다.
위의 모습은 Home을 벗어났을때 보이는 모습이다. beforeUnmount는 아직 DOM이 사라지지 않을때지만, unmounted에서는 DOM이 사라졌으며 data의 값들은 남아 있는 모습이다.
이렇게 라이프사이클의 특징을 알아보았다.
아까도 언급했다시피 created, mounted, unmounted가 자주 사용되는 라이프사이클이기 떄문에 3가지의 특징은 꼭 알아두면 유용하다.
