서론
Vue에서 인스턴스나 컴포넌트를 생성할 때 생기는 과정들을 라이프 사이클이라 하는데, 이 라이프 사이클 과정중 일어나는 일과 해당 개념들에 대해 알아보도록 하자.
인스턴스 라이프 사이클이란?
인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고
각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(Hook)이라고 한다.
라이프 사이클 속성 종류
위의 그림은 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램이다.
키워드를 보면 총 8개의 속성이 있다. 이 속성에 대해 하나씩 알아보면 다음과 같다.
1. beforeCreate
인스턴스가 생성되고 나서 가장 처음으로 실행되는 라피으 사이클 단계이다. 이 단계에서는 data속성과 method 속성이 아직 인스턴스에 정의되어 있지 않고 돔과 같은 화면 요소에도 접근할 수 없는 상태이다.
2. created
data속성과 method속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직을 이용하여 data와 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있게 된다.
그렇지만 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 는 없는 상태이다.
3. beforeMount
template속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계를 말한다.
이 속성은 render() 함수가 호출 되기 직전의 로직을 추가할 때 사용하면 좋다.
4. mounted
template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.
5. beforeUpdate
el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다. 치환된 값은 뷰의 반응성을 제공하기 위해 $watch속성으로 감시한다. 이를 데이터 관찰이라 한다.
관찰하고있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다는 특징이 있다.
6. updated
데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계이다.
데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다.
주의 할점은 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 변경하려면 computed 또는 watch와 같은 속성을 사용해야한다.
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>위의 소스를 실행하여 개발자모드 콘솔에서 확인하면 실행되면서 찍힌 로그를 볼 수 있다.
참고바란다.
반응형
'Programming > Vue' 카테고리의 다른 글
| [Vue] 상태 관리 Vuex란? (개념/ 사용 이유) (0) | 2022.05.19 |
|---|---|
| [Vue] lodash를 이용하여 중복 값을 제거하는 방법 (_uniqBy, _unionBy) (0) | 2022.04.27 |
| [Vue] should always be multi-word-component 에러 해결 방법 (ESLint 설정) (2) | 2022.04.25 |
| [Vue] 컴포넌트(Component)란 ? (개념 / 특징 / 예제) (1) | 2022.04.21 |
| [Vue] MVVM 패턴이란? (개념 / 특징 / 장점) (0) | 2022.04.18 |
댓글