Vue.js)인스턴스와 라이프사이클
1. 인스턴스
- Vue 인스턴스는 Vue 컴포넌트와 애플리케이션의 논리를 캡슐화하며, 데이터와 DOM 간의 반응형 바인딩을 제공하는 역할을 합니다.
2. 인스턴스 생성
createApp 함수를 이용하여 새로운 애플리케이션 인스턴스를 생성하여 시작합니다.
const app = Vue.createApp({ /* options */ })
위처럼 인스턴스를 생성하면 mount 메소드에 컨테이너를 전달하여 mount 할 수 있습니다.
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)
// chaining 형태도 가능
const app = Vue.createApp({})
.component('SeaerchInput', SearchInputComponent)
.directive('focus', FocusDirective)
.use(LocalePlugin)3. 인스턴스 속성들
| 속성 | 의미 |
| data | 인스턴스의 반응형 데이터 객체 |
| methods | 인스턴스의 메서드를 정의 |
| props | 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 |
| computed | 데이터 기반의 반응형 계산 속성을 정의 |
| inject | 부모 컴포넌트에서 제공한 의존성을 자식 컴포넌트에서 주입받을 때 사용 |
| setup | 컴포넌트의 로직을 정의하는 부분, 컴포넌트가 생성될 때 호출되며, 반응형 상태, 계산 속성, 메서드 등을 정의 |
4. 라이프사이클 훅
각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다. 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야 합니다. 그 과정에서 라이프사이클 훅이라 불리는 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다.
1. Vue.createApp 메서드를 통해 프로젝트를 시작하고 mount라는 메서드로 실제 html 구조에 연결합니다.
2. Vue.js의 이벤트와 라이프사이클을 초기화를 합니다.
3. 초기화 후에 beforeCreate라는 라이프 사이클 훅이 실행됩니다.
4. injections와 reactivity를 초기화 합니다. (미리 만들어 놓은 데이터들과 기본적인 반응성들이 만들어지는 과정)
5. 초기화 후에 created라는 라이프 사이클 훅이 실행됩니다.
* beforeCreate는 인스턴스가 생성 직전 created는 인스턴스 생성 직후를 나타냅니다. 예를 들어 count: 4라는 데이터가 있을 때 count라는 데이터는 4번 부분에서 초기화가 진행되기 때문에 beforeCreate에서는 읽을 수 없고 created에서 읽을 수 있습니다.
6. el, template 옵션 여부에 따라 분기 처리에 따라 처리과정을 거칩니다.
7. 처리과정을 마치면 실제 html 구조 부분에 연결하기 직전 beforeMount라는 라이프 사이클 훅이 실행됩니다.
8. 실제 html 구조에 연결합니다.
9. 연결이 된 직후에는 mounted라는 라이프 사이클 훅이 실행됩니다.
* beforeMount와 mounted는 html 구조에 연결되기 직전과 직후를 나타냅니다.
10. mounted 후에 데이터를 수정하게 되면 beforeUpdate라는 라이프 사이클 훅이 실행됩니다. 그 직후에 Virtual DOM이라는 가상의 DOM을 통해 화면에 그려져 있는 내용과 실제로 데이터가 변경돼서 화면에 다시 그려야 될 내용을 비교 분석하는 과정이 동작하게 됩니다. 비교 후 화면에 내용을 다시 그리게 되면 updated라는 라이프 사이클 훅이 실행됩니다.
11. 앱에서 unmount라는 메소드를 실행하면 beforeUnmount라는 라이프 사이클 훅이 실행됩니다.
12. 이후 실제로 연결이 끊어지고 나면 unmonuted라는 라이프 사이클 훅이 실행됩니다.
5. 라이프사이클 테스트
<template>
<h1>
{{ count }}
</h1>
</template>
<script>
export default {
data() {
return {
count: 2,
};
},
created() {
console.log('Created!');
},
mounted() {
console.log('Mounted');
},
};
</script>위와 같이 코드를 작성 후 개발 서버에서 콘솔 창을 확인해 보면 아래와 같이 Created 이후에 Mounted가 출력되는 것을 알 수 있습니다.
mounted() {
console.log('Mounted');
},
created() {
console.log('Created!');
},순서를 바꾸어도 동일하게 출력됨을 알 수 있습니다.
beforeCreate() {
console.log('Before Create');
},
created() {
console.log('Created!');
},
beforeMount() {
console.log('Before Mount');
},
mounted() {
console.log('Mounted');
},
앞서 살펴본 라이프 사이클 훅 처럼 순서대로 출력됨을 확인할 수 있습니다.
beforeCreate() {
console.log('Before Create', this.count);
},
created() {
console.log('Created!', this.count);
},
인스턴스가 생성되기 전인 beforeCreate에서는 count가 undefined, 생성된 후인 created에서는 count가 출력됨을 알 수 있습니다.
beforeMount() {
console.log('Before Mount');
console.log(document.querySelector('h1'));
},
mounted() {
console.log('Mounted');
console.log(document.querySelector('h1'));
},
html 구조에 연결되기 전인 beforeMount에서는 해당 dom이 null, 연결된 후인 mounted에서는 해당 dom이 출력됨을 알 수 있습니다.
참고문서: