jhhan의 블로그

Vue.js 라이프 사이클 본문

Vue.js

Vue.js 라이프 사이클

jhhan000 2020. 5. 2. 00:00

이번에는 Vue.js 중 라이프 사이클에 대해 좀 더 자세히 알아보도록 하겠습니다.

참고로 이전 포스트에서 써놨을 수도 있지만, 

최근 코딩을 진행하면서 이 라이프 사이클이 어떤 역할을 하는지 중요하겠다는 생각이 들어서 올립니다.

 

[Do it! 예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문] 책을 바탕으로 합니다.

이 설명은 vue-cli 가 아닌 html기반으로 설명이 진행됩니다.

 

라이프 사이클

  • 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기
  • 인스턴스의 상태에 따라 호출할 수 있는 속성들 -> 라이프 사이클 속성
  • 각 라이프 사이클 속성에서 실행되는 커스텀 로직 : 라이프 사이클 훅

라이프 사이클의 단계

  • 크게 나눠보기 : 생성 -> 부착 -> 갱신 -> 소멸
  • 생성 : 인스턴스 생성
  • 부착 : 생성된 인스턴스를 화면에 부착
  • 갱신 : 인스턴스 내용을 갱신
  • 소멸 : 인스턴스 소멸

뷰 라이프 사이클 다이어그램

이 그림은 책에 나온 그림을 비슷하게 제가 따라 그려봤습니다.

 

각각의 라이프 사이클 속성에 대해서 살펴보겠습니다.

 

1. beforeCreate

  • 인스턴스가 생성되고 가장 처음으로 실행되는 단계
  • data 속성, methods 속성이 아직 인스턴스에 정의되지 않았습니다.
  • 돔과 같은 화면 요소에도 접근할 수 없습니다.

2. created

  • beforeCreate 다음에 실행되는 단계
  • data속성, methods속성이 정의되었기 때문에 접근하여 로직을 실행할 수 있습니다.
  • 단 인스턴스가 화면에 부착되기 전이어서 template 속성에 정의된 돔 요소로 접근할 수 없습니다.

3. beforeMount

  • template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계
  • render() : 자바스크립트로 화면의 돔을 그리는 함수
  • render() 함수가 호출되기 직전의 로직을 추가하기 좋음.

4. mounted

  • 지정한 화면 요소에 인스턴스가 부착된 후 호출되는 단계
  • template 속성에 정의한 화면 요소(돔)에 접근 할수 있습니다.
  • 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다.
  • $nextTick() API를 활용해 HTML 코드로 최종 파싱될 때까지 기다린 후 돔 제어 로직을 추가할 수 있습니다.

5. beforeUpdate

  • el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다.
  • 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
  • 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있습니다.
  • 단, 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다.

6. updated

  • 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
  • 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계입니다.
  • 단, 데이터 값을 변경하면 무한루프에 빠질 수 있으니 주의해야 합니다.
  • computed, watch 같은 속성을 활용해야 합니다.
  • 따라서 데이터 값을 갱신하는 로직은 beforeUpdate에, 
  • updated에는 변경 데이터의 화면 요소(돔)와 관련된 로직 추가하는 것을 추천합니다.

7.beforeDestroy

  • 뷰 인스턴스가 파괴되기 전에 호출되는 단계
  • 아직 인스턴스에 접근할 수 있습니다.
  • 뷰 인스턴스의 데이터를 삭제하기 좋은 단계입니다.

8. destroyed

  • 뷰 인스턴스가 파괴된 후 호출되는 단계
  • 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 모두 파괴

 

이제 라이프 사이클에 대한 예제를 살펴보겠습니다.

<html>
	<head>
    	<title>Vue Instance LifeCycle</title>
    </head>
    <body>
    	<div id="app">
        	{{ message }}
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
        	new Vue({
            	el: '#app',
                data: {
                	message: 'Hello Vue.js!'
                },
                beforeCreate: function() {
                	console.log("beforeCreate");
                },
                created: function() {
                	console.log("created");
                },
                mounted: function() {
                	console.log("mounted");
                },
                updated: function() {
                	console.log("updated");
                },
            });
        </script>
    </body>
</html>

위의 코드와 같이 적고 실행을 한 후 로그를 보면 beforeCreate, created, mounted는 표시가 되지만,

updated가 표시되지 않음을 알 수 있습니다.

그 이유는 updated는 데이터 변경이 일어나 화면이 다시 그려졌을 때 호출되는 로직이기 때문입니다.

그럼 updated 앞단계인 mounted에서 message값을 변경하겠습니다.

<html>
	<head>
    	<title>Vue Instance LifeCycle</title>
    </head>
    <body>
    	<div id="app">
        	{{ message }}
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
        	new Vue({
            	el: '#app',
                data: {
                	message: 'Hello Vue.js!'
                },
                beforeCreate: function() {
                	console.log("beforeCreate");
                },
                created: function() {
                	console.log("created");
                },
                mounted: function() {
                	console.log("mounted");
                    this.message = 'Hello Vue!';
                },
                updated: function() {
                	console.log("updated");
                },
            });
        </script>
    </body>
</html>

그리고 실행을 해서 로그창을 보면 updated가 출력된 것을 볼 수 있습니다.

message 값이 변경됨에 따라 화면에 표시되는 message 값이 갱신되었고,

이에 따라 updated 속성에 정의한 로직이 실행되었기 때문입니다.

 

이렇게 뷰 라이프 사이클에 대해서 알아보았습니다.

코딩을 진행하면서 라이프 사이클이 생각보다 중요한거 같아서 이렇게 포스팅을 했습니다.

'Vue.js' 카테고리의 다른 글

Vuetify 시작  (0) 2020.05.23
vue.js - for문 관련  (0) 2020.05.19
Vue.js_기초_설치관련  (0) 2020.04.12
Vue.js 기초(5)_심화  (0) 2020.04.10
Vue.js 기초(4)_템플릿  (0) 2020.04.09
'Vue.js' Related Articles more