[Vue.js] 기초 개념 정리 - Vue LifeCycle Hook

 

 

 

🗂 목차

[Vue.js] 기초 개념 정리 - 기본 환경 구성

[Vue.js] 기초 개념 정리 - Vue Router

[Vue.js] 기초 개념 정리 - Vue LifeCycle Hook

[Vue.js] 기초 개념 정리 - data(), Data 처리

[Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문

 

 

 

🐱 Git Hub 주소 : https://github.com/junyharang-FrontEnd-coding-study/vue.js-study

📖 참고 자료 : https://www.youtube.com/watch?v=sqH0u8wN4Rs

 

📖 참고 자료 : https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html

 

 

🚀 VueLife Cycle Hook 이란?

 

Vue 인스턴스나, 컴포넌트가 생성될 때, 사전에 정의된 몇 단계의 과정을 거치게 되는데, 이를 생명주기(Life Cycle)이라고 하는 것이에요.
Vue 인스턴스가 생성된 뒤 우리 눈에 보여지고, 사라지기 까지의 단계를 말한답니다!

Vue 인스턴스는 크게 생성(Create)되고, DOM에 붙게(Mount)되고, 수정(Update)된 뒤 없어지는(Destroy) 크게 4가지 과정을 거치게 되는 것이에요.

이 과정에서 Vue는 각각의 단계에서 Vue를 사용하는 사람들을 위해 Hook을 할 수 있도록 API를 제공한답니다.
일반적으로 많이 사용하는 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestory, destroyes가 있는 것이에요.

출처 : https://kr.vuejs.org/v2/guide/instance.html

 

위의 그림을 좀 더 쉬운 그림으로 볼 것이에요.

 

출처 : https://velog.io/@uoayop/Vue.js-%EB%9D%BC%EC%9D%B4%ED%94%84-%EC%82%AC%EC%9D%B4%ED%81%B4

 

 

beforCreate

Type : Function

간략 : 인스턴스가 초기화 된 뒤 Data 관찰 및 Event/Watcher(감시자) 설정 전에 동기적으로 호출

상세 : Vue 인스턴스가 초기화 된 뒤 발생되는데, 컴포넌트가 DOM에 추가되기 전이기 때문에 `this.$el`에 접근할 수 없다.
또한, data, event, watcher에도 접근하기 전이기 때문에 data, methods 에도 접근할 수 없다.

 

예시 코드

var app = new Vue({
	el: '#app',
    data() {
    	return {
        	msg: 'hello JunyHarang';
        }
    },
    
    beforeCreate(function() {
    	console.log(this.msg);		// undefined Error
    })
})

 

 

created

Type : Function

간략 : 인스턴스가 생성된 뒤 동기적 호출. 이 단계에서 인스턴스는 data 관찰, computed 속성, methods, watch/ Event Call Back 등의 설정이 준비 되었음을 의미하는 Option 처리 완료.
단, Mount 단계가 시작되지 않은 단계이며, `$el`은 사용할 수 없다.

상세 : data를 반응형으로 추적할 수 있게 되며 computed, methods, watch 등이 활성화 되어 접근이 가능.
하지만, 아직까지 DOM에는 추가되지 않은 상태.

data에 직접 접근이 가능하기 때문에, Component 초기에 외부에서 받아온 값들로 data를 Setting 하거나, Event 리스너를 선언해야 한다면 이 단계에서 하는 것이 적절. 
Option의 설정들을 완료하는 시점이라고 생각하면 된다.

 

예시 코드

var app = new Vue({
    el: '#app',
    data() {
        return {
            msg: 'hello JunyHarang';
        }
    },
    created(function() {
        console.log(this.msg); 			// hello JunyHarang
    })
})

 

 

beforeMount

Type : Function

간략 : 마운트가 시작되기 직전 호출. render 함수가 처음 호출.
이 Hook은 서버측 랜더링 중 호출되지 않는다.

상세 : DOM(html Code)에 붙기 직전 호출 되는 Hook으로 이 단계 전에는 템플릿이 있는지 없는지 확인 뒤 템플릿을 랜더링 한 상태이기에 가상 DOM이 생성 되어있으나, 실제 DOM에는 붙지 않은 상태

 

예시 코드

var app = new Vue({
    el: '#app',
    beforeMount(function() {
        console.log('beforeMount');
    })
})

 

 

 

mounted

Type : Function

간략 : 인스턴스가 마운트된 뒤 호출되며 `Vue.createApp({}).mount()`로 전달된 Element는 새로 생성된 `vm.$el`로 대체된다. Root 인스턴스가 문서 내 Element에 Mount 되어 있으면 `mounted`가 호출될 때 `vm.$el`도 문서에 포함(in-document)된다.

상세 : 일반적으로 가장 많이 사용하는 Hook으로 가상 DOM의 내용이 실제 DOM에 붙고 난 뒤 실행되기 때문에 `this.$el`을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능.

 

 

일반적인 경우 부모와 자식 컴포넌트 간 mounted Hook 순서는 위의 그림과 같다.
부모 컴포넌트의 mounted Hook은 항상 자식 Component의 mounted Hook 이후 발생한다.

하지만 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼, 부모의 mounted Hook이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않는다. 따라서 이 때는 `this.$nextTick`을 이용해 모든 화면이 랜더링 된 뒤 실행하게 되기 때문에 mount 상태를 보장 받을 수 있다.

 

예시 코드

var app = new Vue({
    el: '#app',
    mounted(function() {
        console.log('mounted');
    })
})

 

 

 

beforeUpdate

Type : Function

간략 : DOM이 패치되기 전 Data가 변경될 때 호출. 이 훅은 update 전에 기존 DOM에 접근 (예 : 수동으로 추가된 Event 리스터를 제거).

상세 : 컴포넌트에서 사용되는 data의 값이 변해 DOM에도 그 변화를 적용시켜야 할 때 사용한다. beforeUpdate Hook은 변화 직전에 호출되는 것이다. 변할 값을 이용해 가상 DOM을 랜더링하기 전이나, 이 값을 이용해 작업할 수 있다.
이 Hook에서 값들을 추가적으로 변화 시키더라도 랜더링을 추가로 호출하지는 않는다.

 

예시 코드

var app = new Vue({
    el: '#app',
    beforeUpdate(function() {
        console.log('beforeUpdate');
    })
})

반응형

 

 

 

updated

Type : Function

간략 : Data가 변경되어 가상 DOM이 다시 랜더링되고, 패치된 뒤 호출된다.
updated가 호출될 때 컴포넌트의 DOM이 update 되기 때문에 여기에서 DOM의 종속적인 연산(DOM-dependent operations)을 할 수 있다. 그러나, 대부분 Hook 내부에서 상태를 변경하지 않아야 한다. 상태 변경에 반응하기 위해 일반적으로 computed property 속성이나, watcher를 사용하는 것이 좋다.
updated는 모든 하위 컴포넌트가 다시 랜더링 되었음으로 보장하지 않는다. 전체 화면이 재 랜더링 될 때가지 기다리려면, updated 내부 `vm.$nextTick`을 사용한다. 이 Hook은 서버 측 렌더링 중 호출 되지 않는다.

상세 : 가상 DOM을 렌더링 하고 실제 DOM이 변경된 뒤 호출 되는 Hook이다. 변경된 data가 DOM에도 적용된 상태로 변경된 값들을 DOM을 이용해 접근하고 싶다면, updated Hook을 사용하는 것이 좋다.
다만, 이 Hook에서 data를 변경하는 것은 무한 루프에 빠질 수 있기 때문에 직접 data를 바꾸는 것은 매우 위험하다.
mounted Hook과 마찬가지로 `this.$nextTick`을 이용 모든 화면이 update된 뒤 상태를 보장할 수 있다.

 

예시 코드

var app = new Vue({
    el: '#app',
    updated(function() {
        console.log('updated');
    })
})

 

 

 

 

 

beforeDestroy

Type : Function

상세 : 해당 인스턴스가 해체되기 직전 beforeDestroy Hook이 호출된다. 아직 해체되기 이전이기 때문에 인스턴스는 완전하게 작동 되고 있다. 따라서 모든 속성에 접근이 가능하다. 이 단계에서 Event 리스터를 해체하는 등 인스턴스가 사라지기 전에 해야할 일들을 처리하면 된다.

 

예시 코드

var app = new Vue({
    el: '#app',
    beforeDestroy(function() {
        console.log('beforeDestroy');
    })
})

 

 

 

 

destroyed

Type : Function

상세 : 인스턴스가 해체되고 난 뒤 destroyed Hook이 호출된다. 해체가 끝난 뒤이기 때문에 인스턴스의 속성에 접근할 수 없다. 또한, 하위 Vue 인스턴스 역시 삭제된다.

 

예시 코드

var app = new Vue({
    el: '#app',
    destroyed(function() {
        console.log('destroyed');
    })
})

 

 

화면에 어떻게 찍히는지 보기 위해 위와 같이 Life Cycle Hook에 모든 함수를 만들고, console.log를 통해 출력 되도록 해 볼 것이에요.

 

 

화면에 처음 들어오게 되면 console에 `beforeCreate, created, beforeMount, mounted`가 순서대로 찍히는 것을 확인 할 수 있는 것이에요.

 

 

이 상태에서 Data를 변경을 주는 Set Button을 누르는 순간 `beforeUpdate, updated`가 출력되는 것을 확인 할 수 있는 것이에요. 위의 그림에서 보았듯이 Data가 변경이 되면 beforeUpdate와 updated가 호출 되면서 가상 DOM이 Re Render가 발생하는 것이에요. 즉, 화면에서 어떤 Data가 변경이 되면 이 두 개가 호출 되는 것이에요.

Data 변경 Button에 관련해서는 `이 곳`을 참고 해 주세요!

우리가 DB에서 어떤 값을 가져와서 화면을 보여줘야 한다고 가정을 했을 때는 created 단에서 해당 Data를 가져오게 하면 되는 것이에요. 그런 뒤 data()에서 해당 내용을 가져와서 mounted 단계에서 화면에 보여줄 수 있게 할 수 있는 것이에요.

이미 Data를 가져온 뒤 Data가 변경이 일어나게 된다면 beforeUpdate와 updated 단계에서 어떤 작업을 해주면 되는 것이에요. beforeUpdate와 updated는 Re Render를 하기 때문에 화면에 출력 되기 전 Data를 가져와야 한다면 created 단계에서 Data를 미리 가져오게 처리하는 것이 맞답니다!

 

 

 

 

 

🚀 InstanceLife Cycle Hook 이란?

인스턴스 라이프 사이클이란 Vue.js의 인스턴스가 생성되어 소멸되기까지 과정을 의미합니다. 인스턴스가 생성되고 나면 Library 내부적으로 다음과 같은 과정이 진행된답니다.

● DATA 속성의 초기와 및 관찰 (Reactivity 주입)
● Vue Template Code Compile (Virtual DOM -> DOM 변환)
● 인스턴스를 DOM에 부착

    🔽  Life Cycle Diagram

인스턴스 라이프 사이클 흐름을 그림으로 그려보면 아래와 같아요.

Life Cycle Diagram

 

 

 

    🔽  Life Cycle Hook

Vue.js Life Cycle을 이애해야 하는 이유는 바로 Life Cycle Hook 때문이에요. Life Cycle Hook으로 인스턴스의 특정 시점에 원하는 Logic을 구현할 수 있기 때문이죠.

예를 들어 Component가 생성되자마자 Data를 Server에서 받아오고 싶다면 `create()`, `beforeMount` Life Cycle Hook을 이용할 수 있어요. 아래 Code는 인스턴스가 생성되자마다 `Axios`를 통해 `HTTP Get Method`를 통해 요청을 보내 Data를 받아오는 Code에요.

new Vue({
  methods: {
    fetchData() {
      axios.get(url);
    }
  },
  created: function() {
    this.fetchData();
  }
})