FrontEnd

[Vue.js] Vue 인스턴스 생명주기란? (Life cycle)

Taemin Kim 2023. 2. 8. 10:42

최근에 vue를 공부하면서 알게된 라이프사이클 즉 생명주기에 대해 정리해보려고한다.

 

생명주기란 무엇인가?

 

인스턴스의 상태에 따라서 호출할 수 있는 속성들을 우리는 생명주기(life cycle)라고 한다.

 

해당하는 속성마다 개발자가 원하는 방식으로 로직처리하여 커스텀화 할 수 있는데 그것을 라이프 사이클 훅(life cycle hook)이라고 한다.

 

개발공부를 하다보면 객체라는 말을 한번쯤은 들어봤을텐데 뷰 인스턴스도 객체이기 때문에 생명주기를 가지고 있다.

 

그렇다면 생명주기는 어떻게 구성되어있을까?


총 8가지의 속성으로 구성되어있는데 

 

이미지를 통해서 한눈에 확인해보자

 



이미지를 보니까 괜히 복잡해보인다.

복잡하게 생각하지말고 큰 줄기를 먼저 이해하고 들어가기위해서 큰 줄기로 설명을 간략하게 하고

 

순차적으로 각 속성들이 하는 일에 대해서 나눠서 살펴보도록하자

 


라이프 사이클의 큰 단계


생성 -> 부착 -> 갱신 -> 소멸 

1. 생성 : 인스턴스가 생성된다.
2. 부착 : 생성된 인스턴스를 화면에 부착한다.
3. 갱신 : 인스턴스의 내용이 갱신된다.
4. 소멸 : 인스턴스가 소멸된다.


1. beforeCreate

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

2. created

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

3. beforeMount

  • render() 함수가 호출되기 직전 단계로 created 이후에 template 속성에 지정한 마크업 속성을 render()함수로 변환한 후 el속성에 지정한 화면 요소에 인스턴스를 부착하기 직전에 호출되기 때문에 화면에 붙이기 전 실행하고자 하는 코드를 구현하면 된다.
  • render() : 자바스크립트로 화면의 돔을 그리는 함수이다.

4. mounted

  • el 속성에서 지정한 화면 요소에 인스턴스가 부착된 후 호출되는 단계이다.
  • template 속성에 정의한 화면 요소(돔)에 접근 할수 있다.
  • 화면 요소를 제어하는 로직을 처리할 코드를 구현하면 된다.
  • 주의할 점은 돔에 인스턴스가 부착되자마자 호출되기 때문에 추가된 화면 요소들이 최종적으로 HTML 코드로 변환되는 것을 기다린 후 돔 제어 로직을 추가할 수 있다.

5. beforeUpdate

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

6. updated

  • beforeUpdate가 끝나고 화면에 다시 그리고 나면 실행되는 단계이다.
  • 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하면 되는 단계이다.
  • 단, 데이터 값을 변경하면 무한루프에 빠질 수 있으니 주의해야 한다. 그 이유는 여기서 값을 변경하면 다시 5.beforeUpdate-> updated(다시 값 변경) -> beforeUpdate -> ... 이런식으로 무한루프가 되기 때문이다.
  • 따라서 데이터 값을 갱신하는 로직은 beforeUpdate에서 처리하고 updated에는 변경 데이터의 화면 요소(돔)와 관련된 로직 추가하는 것을 추천한다.

7.beforeDestroy

  • 뷰 인스턴스가 파괴되기 직전에 호출되는 단계이다.
  • 아직 인스턴스가 사라지기 전 단계로 여전히 인스턴스에 접근이 가능하다.
  • 뷰 인스턴스의 데이터를 삭제하거나 인스턴스가 사라지기 직전 처리할 작업을 구현하면 된다.

8. destroyed

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

 

 

라이프 사이클을 코드를 통해 콘솔로 확인해볼수도 있다.

 

<html>
<head>
    <title>Vue Sample</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 = "hey!"
        },
        updated : function() {
            console.log("updated");
        }
    });
</script>
</body>
</html>

 

해당 코드를 실행하면 

 

콘솔에는 아래와같이 찍히게 된다.

 

 

그런데 updated가 출력되지 않았다.

 

그 이유는 데이터가 변경되었을 경우에만 호출되기 때문이다.

 

상단 전체코드에서 주석처리된 this.message를 주석제거한 후 실행해서 데이터를 수정해보자

 

이렇게 업데이트까지 정상 출력되는 것을 알 수 있다.

 

이처럼 단순히 동작하는 것 처럼 보여도 내부적으로는 여러단계를 거치면서 실행된다는 것을 알게되었다.

 

오늘은 Vue의 LifeCycle에 대해서 알아봤다.

 

 

저작자표시 비영리 변경금지