Vue의 생명주기에 대해 알아보았다.
기본적인 틀은 이러하다.
beforeCreate() -> created() -> beforeMount() -> mounted() -> beforeUpdate() -> updated() -> beforeUnmount() -> unmounted()
unmount 혹은 destroy라고 하는 것 같다. 강의에서는 Unmount로 배웠다.
이해하는 데에는 실습이 제격. 바로 실습에 들어가본다.
지난 강의에서 만들었던 간단한 예제에 적용해보았다.
app.js 파일의 methods 밑에 다음과 같은 코드를 추가하였다.
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeUnmount() {
console.log("Unmount");
},
unmounted() {
console.log("unmounted");
},생명주기를 순서대로 적고 console로 확인하기로 했다.
페이지를 열자 beforeCreate-created-beforeMount-mounted 까지 출력되는 모습.
source창에서 pause를 걸면서 하나씩 확인해 보았다.
beforeCreate-created-beforeMount 까지는 위 화면에서 변함이 없다가,
mounted에 돌입하면서 기존의 화면이 나타난다.
그다음 update 부분은 업데이트될 내용이 없기에 아무것도 하지않으면 일어나지 않는다.
그래서 텍스트를 추가해보았다.
Set Text 버튼을 누른 후, beforeUpdate에서 pause가 걸린 상태이다.
내가 텍스트를 입력한 후에 Vue 템플릿과 상호작용을 하게되는 버튼을 클릭했으므로 Vue가 update를 하기전에 멈춘 것이다.
그러면, updated에 돌입하면 어떻게 될까?
Vue is great!가 있는 부분이 When update ?로 바뀌게 될 것이다.
👏 짝짝짝. 정답
마지막으로 unmount를 다뤄보자.
먼저, 페이지를 열자마자 unmount가 되면 곤란하므로 setTimeout을 이용해서 3초뒤에 unmount되도록 만들었다.
app.mount("#app");
setTimeout(function () {
app.unmount();
}, 3000);
페이지가 로드 된 후 3초뒤에 unMount , unmounted 콘솔이 찍히는걸 확인.
그 다음엔 beforeUnmount에 pause를 걸었다.
짜잔, 지금 보고있는 화면이 beforeUnmount에서 pause가 걸린 상태이다.
그렇다면 unmounted가 되면 어떻게 될까? mounted가 되기 전의 화면으로 돌아가겠지?
👏 짝짝짝. 정답
정리
- 처음에 LifeCycle을 이론적으로, 그림으로 봐도 이해가 되지않았으나 직접 실습해보니깐 이해가 팍! 된다. 조금이라도 이해가 안되면 console을 찍어가면서 실습해보자.
- 위에 내용은 정말 중요한 Vue의 생명주기이므로 다시 읽게 된다면 찬찬히 읽어보자.
