리액트를 어느 정도 공부하고 뷰를 공부하는데, 정확히 어떤 부분을 알아야 하고 학습해야 하는지 대략적인 그림이 그려졌습니다. 라우터 다음은 인스턴스 라이프사이클, 그 다음으로 상태관리인 Vuex를 공부하려고 합니다.
Vue.js 인스턴스 라이프사이클
리액트에서는 useEffect 훅을 사용했습니다. 뷰에서는 컴포넌트가 마운트/업데이트/언마운트 될 때, 아래에서 제공하는 라이프사이클 훅을 사용하면 특정 코드를 실행할 수 있습니다.
- beforeCreated
인스턴스가 초기화된 직후, 데이터 관찰 및 이벤트/감시자(watcher) 설정 전에 동기적으로 호출된다고 한다.
export default {
name: 'App',
beforeCreate(){
console.log('Before Created');
console.log(this.count);
},
created(){
console.log('Created');
},
beforeMount(){
console.log('BeforeMount');
},
mounted(){
console.log('Mounted!');
},
beforeUpdate(){
console.log('Before Update!');
},
unmounted() {
console.log('UnMounted!');
},
data(){
return{
count : 0
}
}
}
beforeCreate에서 count를 찍었을 때, undefined로 나온다. data에 선언된 값을 사용하려면 다음 단계인 created 단계에서 사용해야 한다.
- created
인스턴스가 생성된 후 동기적으로 호출된다. created 단계에서 인스턴스는 data 관찰, computed 속성, methods, watch/이벤트 콜백 등의 설정이 준비됐음을 의미한다. 그러나 마운트 단계가 시작되지 않았으며, $el 속성을 사용할 수 없다.
-> data, methods 속성이 정의되어 접근 가능
-> $el과 template 접근 불가(mounted에서 접근 가능)
- mounted
mounted는 모든 자식 컴포넌트가 마운트 되었음을 보장하지 않는다. 전체 화면 내용이 렌더링 될 때를 확인하고 싶다면 mounted 내에서 vm.$nextTick를 사용해야 한다.
mounted(){
console.log('Mounted!');
this.$nextTick(()=> { console.log('All Done!') });
},
- beforeUpdate
DOM이 패치되기 전에 데이터가 변경될 때 호출된다. 이 훅은 업데이트 전에 기존 DOM에 접근 (예: 수동으로 추가된 이벤트 리스너를 제거)할 수 있다.
인스턴스가 마운트 된 후, $watch 속성으로 관찰하던 데이터가 변경되면 화면에 다시 그려지게 되는데, 이때 그리기 직전 호출되는 단계다.
- 데이터만 변경되고 화면 상 렌더링이 안 되는 경우 호출되지 않는다.
- update
데이터가 변경되어 가상 DOM이 다시 렌더링 되고 패치된 후에 호출된다. 데이터 변경은 선언된 모든 데이터를 뜻하며 특정 데이터만 마킹하고 싶을 경우 watcher를 사용하는 것이 좋다.
- beforeUnmount
- beforeUnmount는 인스턴스가 마운트 해제되기 직전에 호출되는 단계로 아직 인스턴스는 완전하게 동작한다.
- 인스턴스가 사라지기 직전 수행해야 할 코드를 작성해야 한다.
- unmounted
모든 디렉티브가 바인딩 해제되고, 이벤트 리스너가 제거되며, 모든 자식 컴포넌트도 마운트 해제된 상태
여기까지는 Composition API를 사용하지 않을 경우이고, Vue.js 3.0 이후로 setup() 안에서 라이프사이클 훅을 사용하려면 아래와 같이 사용해야한다.
라이프사이클 훅
라이프사이클 훅에 접두사 "on"을 추가함으로서 컴포넌트의 라이프사이클 훅에 접근할 수 있습니다.
다음 표에는 setup() 내에 라이프사이클 훅이 호출되는 방법이 포함되어 있습니다.
// MyBook.vue
import { onMounted } from 'vue'
export default {
setup() {
// mounted
onMounted(() => {
console.log('컴포넌트가 mounted 되었습니다!')
})
}
}
Composition API를 배우고나니 리액트 함수형 컴포넌트와 매우 흡사하다..