Vue.js - 라이프사이클(LifeCycle) 기본 설명
① Vue.js로 성공적인 어플리케이션 개발을 위해서는 라이프사이클 이해가 필수적이라고 생각합니다.
② 아래 다이어그램을 확실히 이해하면 좋겠지만, 가장 중요한 요소 네 가지만 기억하세요.
- Creation
- Mounting
- Updating
- Destruction
③ 각 사이클에 대한 자세한 내용은 아래 예제를 보면서 설명하겠습니다.
라이프사이클(LifeCycle) 다이어그램
Vue.js 기초문법8 - 라이프사이클(LifeCycle) 예제
기본 설명 및 소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>webpos-do</title> </head> <style> body { font-family: "Malgun Gothic","맑은 고딕", serif; } #app { text-align: center; margin: 60px; max-width: 400px; margin: 0 auto; display: table; } .num { color: #AF007E; } button { font-family: 'Bitter'; background: #c62735; color: white; border: 0; padding: 5px 15px; margin: 0 10px; border-radius: 4px; outline: 0; cursor: pointer; } h4 { margin: 0 0 15px; } hr { border-color: #F2FAFF; opacity: 0.5; margin: 15px 0; } </style> <body> <div id="app"> <h2>Vue.js 라이프사이클 샘플 예제</h2> <h3>개발자 Console 확인</h3> <button @click="toggleShow"> <span v-if="isShowing">Hide child</span> <span v-else>Show child</span> </button> <hr> <div v-if="isShowing"> <app-child></app-child> </div> <div id="childarea" style="display:none"> <h4>Compoent Create!</h4> </div> </div> <script src="https://unpkg.com/vue"></script> <script> const Child = { template: '#childarea', beforeCreate() { console.log("beforeCreate!!"); }, created() { console.log("created!!"); }, beforeMount() { console.log("beforeMount!!"); }, mounted() { console.log("mounted!!"); }, beforeDestroy() { console.log("beforeDestroy!!"); }, destroyed() { console.log("destroyed!!"); } }; new Vue({ el: '#app', data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } }, components: { appChild: Child } }); </script> </body> </html> | cs |
설명
Creation : 컴포넌트 초기화 단계
- BeforeCreate : 가장 먼저 실행이 먼저 됩니다. 다만, 인스턴스의 data, event 객체는 접근 할 수 없습니다.
- Created : data, event 객체가 준비가 완료된 상태이므로, 처리가 가능합니다.
Mounting : Dom 작성 단계
- BeforeMount : 템플릿 및 코드들이 렌더링 되기 직전에 호출 됩니다. 거의 사용하지 않습니다.
- Mounted : 컴포넌트, 템플릿, DOM이 모두 준비된 상태입니다. 이 상태에서 Ajax(Fetch) 통신 처리가 가능합니다.
Updating : 상태 변화로 인한 렌더링 단계
- BeforeUpdate : 컴포넌트 상태 변화(값이 변경)가 일어나면 다시 DOM이 렌더링 되는데 그 직전에 호출됩니다.
- Updated : 상태 변화 후 렌더링이 완료 후 실행됩니다. 주의할 점은 여기서 상태 값이 변경되면 당연히 무한루프에 빠지게 되겠죠?
Destruction : 소멸 단계
- BeforeDestroy : 인스턴스 제거 직전에 호출됩니다. 아래 실행화면에서 보면 확인가능합니다.
- Destroyed : 인스턴스 제거 완료 후 호출됩니다. 연관된 이벤트 리스너, 디렉티브(지시어) 등이 해제 됩니다.
vue_basic5_example.zip 다음 포스팅에서는 Vue.js 템플릿 문법에 대해 알아보겠습니다.
참고 : https://kr.vuejs.org/v2/guide/instance.html
https://medium.com/witinweb/vue-js-라이프사이클-이해하기-7780cdd97dd4
참고 : https://kr.vuejs.org/v2/guide/instance.html
https://medium.com/witinweb/vue-js-라이프사이클-이해하기-7780cdd97dd4
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.07 |
|---|---|
| Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법 (2) | 2017.12.01 |
| Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자) (0) | 2017.11.27 |
| Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스 (4) | 2017.11.26 |
| Vue.js - 기초 문법 배우기(2) 강의 및 예제 소스 (2) | 2017.10.01 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}