[뷰 인스턴스 라이프 사이클]
라이프 사이클 ✈︎ 애플리케이션이 가지는 생명주기
🌀 뷰 인스턴스 라이프 사이클
라이프 사이클 (Life Cycle) 속성 : 인스턴스의 상태에 따라 호출할 수 있는 속성
라이프 사이클 훅 (Life Cycle Hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직
| 뷰 생명 주기 표
뷰에서 제공하는 라이프 사이클 표이다. 하나씩 살펴보도록 하자.
| 뷰 라이프 사이클 다이어그램
라이프 사이클은 크게 4가지로 나눌 수 있다.
1) 인스턴스 생성
2) 인스턴스 적용
3) 인스턴스 갱신
4) 인스턴스 소멸
1. beforeCreate
인스턴스 생성 후 가장 처음으로 실행되는 라이프 사이클
vue 인스턴스가 아직 정의되기 전으로 아직 접근할 수 없는 상태
2. created
data, methods 속성이 정의되어 값에 접근가능.
this.data 또는 this.fetchData() 와 같은 로직을 이용하여 정의된 값에 접근하여 로직 실행 가능.
아직 template속성에 정의된 돔요소로 접근 할 수 없다.
이 단계에서 서버에 데이터를 요청하여 받아오는 로직을 수행하기에 좋다.
→ 데이터를 불러와서 화면에 노출해야한다면 이 로직에서 데이터를 불러오자.
3. beforeMount
template 속성에 지정한 마크업 속성을 render()함수로 변환한후 el 속성에 부착하기 전에 호출된다.
render() : javascript 로 화면의 돔을 그리는 함수
render() 함수 호출 직전 로직을 추가하기 좋다.
4. mounted
el 속성에 지정한 화면요소에 인스턴스가 부착되고 나서 호출.
template 속성에 정의한 화면요소(dom) 에 접근가능하여 화면요소를 제어하는 로직을 수행하기 좋다
다만 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변화되는 시점과 다를 수 있다.
* 변환되는 시점이 다를 경우 $next Tick() API를 활용하여 HTML 코드로 파싱죌때까지 기다린 후 돔 제어 로직을 추가.
5. beforeUpdate
지정한 화면요소에 인스턴스가 적용되고 나면 인스턴스에 정의한 속성들이 화면에 치환되어 보여진다.
치환된 값을 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시한다. (데이터 감시)
데이터가 변경되면 가상돔으로 화면을 다시 그리기전에 호출된다.
변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수있다.
6. updated
데이터가 변경되고 가상돔으로 화면을 다시 그리고 나면 실행
데이터 변경으로 인한 화면 요소 변경 완료된 시점으로 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋다.
이 단계에서 값 변경시 무한 루프에 빠질 수 있으니 주의하자.
→ beforeUpdate 에 데이터 값을 갱신하는 로직을 추가하고 updated에는 변경 데이터의 화면요소와 관련된 로직을 추가하자.
7. beforeDestroy
뷰 인스턴스가 제거 되기 직전에 호출되는 단계.
아직 인스턴스에 접근 할 수 있으므로 데이터를 삭제하기 좋다.
8. destroyed
뷰 인스턴스가 파괴되고 나서 호출된다
인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들도 모두 제거된다.
| 라이프 사이클 확인하기
각 라이프 사이클 함수를 정의하여 로그를 찍어보자
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!!'
},
beforeCreate() {
console.log("beforeCreate")
},
created() {
console.log("created")
},
mounted() {
console.log("mounted")
},
updated() {
console.log("updated")
},
})
</script>
</body>
실행시 beforeCreate, created, mounted 로그가 찍힌 것을 확인할수 있다.
message 변경을 통해 update log 가 찍히는지 확인해보자.
- mounted()에서 message 속성 값 변경
- data message가 mount 단계에서 데이터가 변경되어 beforeUpdate, update 로직이 모두 실행된다
message 값이 변경됨에 따라 화면에 표시되는 message의 텍스트가 변경되면서 updated 속성에 정의한 로직이 실행되었다.
이처럼 라이프 사이클을 잘 알아둬야 뷰를 제대로 사용할 수 있으니 꼭 기억해두자.
'프로그래밍 언어 > Vue.js' 카테고리의 다른 글
| 뷰 인스턴스의 유효범위 (1) | 2024.01.26 |
|---|---|
| 뷰 인스턴스란 - 뷰 인스턴스의 정의와 속성 (1) | 2024.01.25 |
| 뷰 Vue.js 시작하기 - Hello Vue.js ! 프로젝트 만들기 (0) | 2024.01.24 |
