웹 프론트/Vue

Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle)

2017. 11. 29. 19:19

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>
 
Colored by Color Scripter
cs

설명


Creation : 컴포넌트 초기화 단계
- BeforeCreate : 가장 먼저 실행이 먼저 됩니다. 다만, 인스턴스의 data, event 객체는 접근 할 수 없습니다.
- Created : data, event 객체가 준비가 완료된 상태이므로, 처리가 가능합니다.

Mounting : Dom 작성 단계
- BeforeMount  : 템플릿 및 코드들이 렌더링 되기 직전에 호출 됩니다. 거의 사용하지 않습니다.
- Mounted : 컴포넌트, 템플릿, DOM이 모두 준비된 상태입니다. 이 상태에서 Ajax(Fetch) 통신 처리가 가능합니다. 

Updating : 상태 변화로 인한 렌더링 단계

- BeforeUpdate : 컴포넌트 상태 변화(값이 변경)가 일어나면 다시 DOM이 렌더링 되는데 그 직전에 호출됩니다.
- Updated : 상태 변화 후 렌더링이 완료 후 실행됩니다. 주의할 점은 여기서 상태 값이 변경되면 당연히 무한루프에 빠지게 되겠죠?

Destruction : 소멸 단계

- BeforeDestroy : 인스턴스 제거 직전에 호출됩니다. 아래 실행화면에서 보면 확인가능합니다.
- Destroyed : 인스턴스 제거 완료 후 호출됩니다. 연관된 이벤트 리스너, 디렉티브(지시어) 등이 해제 됩니다.


실제 실행 화면


Vue.js - 예제 소스 코드 다운로드

 

vue_basic5_example.zip


  다음 포스팅에서는 Vue.js 템플릿 문법에 대해 알아보겠습니다.

  참고 : 
https://kr.vuejs.org/v2/guide/instance.html
             h
ttps://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
'웹 프론트/Vue' 카테고리의 다른 글
  • Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법
  • Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법
  • Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자)
  • Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스
[좋은사람]
[좋은사람]
좋은사람의 개발 노트 입니다.
[좋은사람]
좋은사람의 개발 노트
[좋은사람]
전체
오늘
어제
  • 전체보기 (189)
    • 언어 (68)
      • Java (12)
      • Python (39)
      • C# (5)
      • PHP (4)
      • Go (8)
    • OS (18)
      • Linux (7)
      • Windows 10 (5)
      • Etc (6)
    • 빅데이터 & 분석 (8)
      • R (0)
      • Machine Learning (8)
    • 네트워크 (4)
      • Etc (4)
    • 웹 프론트 (25)
      • Javascript & ECMA (8)
      • Vue (13)
      • React (4)
    • 웹 백엔드 (15)
      • Spring (3)
      • Django & Flask (7)
      • Npm & Express (5)
    • 개발도구 (18)
      • Jetbrains (3)
      • Eclipse (5)
      • Git (4)
      • Atom & VScode (6)
    • 데이터베이스 (7)
      • Oracle (2)
      • MariaDB & MySQL (2)
      • Etc (3)
    • 모바일 (6)
      • Android (3)
      • Hybrid (3)
    • 라이프 (20)
      • 여행 & 일상 (6)
      • 취미 (14)

블로그 메뉴

  • 홈으로
  • 블로그소개
  • 태그
  • 방명록

공지사항

인기 글

태그

  • Algorithm
  • 인텔리j
  • 디자인패턴
  • windows10
  • php
  • 개발자 면접
  • vue.js
  • ubuntu
  • Anaconda
  • npm
  • 3DS
  • nodejs
  • 리액트
  • Git
  • Database
  • 윈도우10
  • javascript
  • 커펌
  • 2DS
  • 미뮤
  • python
  • 이클립스
  • go
  • 아톰 에디터
  • CFW
  • flask
  • Eclipse
  • OCR
  • ATOM
  • Thread
  • centos
  • react
  • 머신러닝
  • SpringSTS
  • Django
  • Linux
  • Java
  • C#
  • 코딩 면접
  • ps4

최근 댓글

최근 글

hELLO · Designed By 정상우.
[좋은사람]
Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.