참조된 서적 : Vue.js 코딩 공작소 (길벗)
개발자 보물상자에서 VueJS 책 한권 다 읽었다라고 할 수 있게끔 쉽게 설명해드리겠습니다.
블로그 포스팅 순서는 책 챕터와 다르게 진행될 수 있습니다. (가끔 필요없을 것 같은 챕터는 건너띌 수도 있다는 뜻)
1. 왜 VueJS를 사용할까?
뭐.. 책에는 VueJS 장점만 모아 써놨으니까, 단점은 안적어놨을겁니다.
자 그럼 과감히 이 목차는 생략하겠습니다.
2. Vue의 생명주기
생명주기 매우 정말 엄청 절대적으로 중요합니다. 반드시 실무에서라면 꼭 필요하게되는 부분입니다.
인스턴스 생성
뷰-모델에서 데이터 관찰자를 생성하고 내부 이벤트 시스템에서 사용될 이벤트를 생성하여 초기화합니다.
템플릿과 가상DOM 생성
템플릿 혹은 렌더링 함수를 찾아서 컴파일합니다. 가상 DOM에 대한 복사본을 가지고 브라우저에 HTML DOM을 생성합니다.
이벤트 루프
데이터 관찰자는 데이터를 감시하고, 변화가 있을 때마다 가상 DOM이 다시 렌더링 되면서 HTML DOM에 적용합니다.
인스턴스 소멸
인스턴스가 사라지기 전에 모든 관찰자, 이벤트 리스너, 자식 컴포넌트들이 먼저 소멸된 후에 인스턴스가 소멸됩니다.
2-1 생명주기 훅 추가
생명주기 훅 추가라고 책에 제목은 이렇게 적혀있었지만, 개인적으로 "생명주기에 이벤트 추가하기"가 더 어울리는 것 같습니다.
안드로이드 자바 혹은 앵귤러를 해보셨던 분은 금방 이해를 하실겁니다. 생명주기가 어느 시점에 왜 필요한지, 그리고 어떤경우에 사용되는지 말입니다.
그럼 VueJS에서는 어떻게 생명주기 구간에 이벤트를 처리할 수 있는지 소스를 보면서 살펴보도록 하겠습니다.
- LifeCycle.js
var websotre = new Vue({
el: "#app",
data: {
sitename: "dev-box Tistory, 개발자 보물상자",
},
beforeCreate: function(){
console.log("beforeCreate, 인스턴스 생성 직전에 발생되는 이벤트입니다.");
},
created: function(){
console.log("created, 인스턴스 생성 후에 발생되는 이벤트입니다.");
},
beforeMount: function(){
console.log("beforeMount, 템플릿과 가상화 DOM 생성 직전에 발생되는 이벤트입니다.");
},
mounted: function(){
console.log("mounted, 템플릿과 가상화 DOM 생성 후에 발생되는 이벤트입니다.");
},
beforeUpdate: function(){
console.log("beforeUpdate, 이벤트 루프 안에서 데이터가 업데이트 직전에 발생되는 이벤트입니다.");
},
updated: function(){
console.log("updated, 이벤트 루프 안에서 데이터가 업데이트 후에 발생되는 이벤트입니다.");
},
beforeDestroy: function(){
console.log("beforeDestroy, 인스턴스 소멸 직전에 발생되는 이벤트입니다.");
},
destroyed: function(){
console.log("destroyed, 인스턴스 소멸 후에 발생되는 이벤트입니다.");
}
});
- Index.html
<html>
<head>
<title>dev-box Tistory, 개발자 보물상자</title>
<!-- VueJS Library -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="dev-box">
<h1>dev-box tistory</h1>
</div>
<script src="./lifecycle.js"></script>
</body>
</html>
개인적으로 <script src="./lifecycle.js"></script> 이런 스크립트 참조하는걸 head에 다 밀어넣어버리는걸 좋아하지만, VueJS에서 생명주기 이벤트를 발생시키기 위해서는 HTML의 가장 아래에 위치시켜야 됩니다.
( 제가 해봤습니다. <head></head>에 집어넣었더니 [Vue warn]: Cannot find element: #main 이 오류 발생합니다.
2-2 실행 결과
아래 사진처럼 생명주기가 발생하는 순서대로, "인스턴스 생성 - DOM 생성 - 데이터 업데이트 - 인스턴스 소멸"까지 순서대로 로그가 찍힌것을 확인할 수 있습니다.
데이터 반영에 대한 Update가 나오지 않은 것은 자바스크립트에 데이터를 변경하는 로직이 없기 때문에 나타나지 않았고, 그건 천천히 개발하다보면 확인하실 수 있을겁니다.
- 오늘은 여기까지 강의를 하고 다음 포스팅에서 이어서 하도록 하겠습니다 : D
'프론트앤드 > VueJS' 카테고리의 다른 글
| [Vue.js] VueJS 코딩 공작소 (길벗) 책 리뷰 #중간후기 (0) | 2020.09.14 |
|---|---|
| [Vue.js] VueJS 강의 #4 - HTML 이벤트 바인딩 (0) | 2020.09.14 |
| [Vue.js] VueJS 강의 #3 - HTML 바인딩과 필터 (0) | 2020.09.07 |
| [Vue.js] VueJS 강의 #1 - 모델 패턴과 반응형 웹 (0) | 2020.08.24 |
