Vue.js의 생명주기에 대해 자세히 알아봅시다!
1. Vue.js의 생명주기(Lifecycle)
Vue.js의 생명주기는 컴포넌트가 생성되고 소멸될 때까지 발생하는 일련의 단계를 의미해요.
Vue 컴포넌트는 각 단계마다 특정한 생명주기 훅(Lifecycle hook)을 호출할 수 있으며, 이를 통해 특정 단계에서 로직을 실행하거나 상태를 관리할 수 있어요.
2. Vue.js 생명주기 단계
생명주기 단계는 다음 그림과 같이 순서대로 나뉘어 있습니다.
그러면 한 단계씩 알아봅시다.
2-1. beforeCreate (생성 전)
beforeCreate는 Vue 인스턴스가 초기화되기 전 상태입니다.
아직 데이터 or 메서드 등이 정의되지 않았기 때문에, 이 단계에서 Vue 인스턴스에 접근할 수 없어요.
즉, 컴포넌트의 데이터(data) or 프로퍼티(props)에 접근할 수 없다는 뜻이죠.
이 훅은 컴포넌트 초기 설정 or 외부 라이브러리와의 연동을 위한 초기화 작업을 수행할 때, 사용될 수 있어요.
사용 방법은 다음과 같습니다.
beforeCreate.vue
export default {
beforeCreate() {
console.log('컴포넌트가 생성되기 직접입니다.');
// 초기화 작업 수행
}
}
2-2. created (생성)
created는 컴포넌트가 생성된 후, 호출됩니다.
이 단계에서 컴포넌트의 data와 props, method에 접근할 수 있으며, 데이터의 초기값을 설정하거나 API 호출을 하는 등의 작업을 수행할 수 있어요.
하지만, 아직 DOM이 생성되지 않았기 때문에, DOM 요소에 직접 접근할 수는 없습니다. DOM 접근이 필요한 경우, mounted 훅을 사용해야 해요.
created는 API 호출 등 비동기 작업을 수행하고, 응답을 받아 업데이트하는 데 적합합니다.
사용 방법은 다음과 같아요.
created.vue
export default {
data() {
return {
message: ''
};
},
created() {
console.log('컴포넌트가 생성되었습니다.');
this.fetchData();
},
methods: {
fetchData() {
// API 호출 예시
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
this.message = data.message;
});
}
}
}
2-3. beforeMount (마운트 전)
beforeMount는 컴포넌트가 마운트되기 직전에 호출됩니다.
이 단계에서는 컴포넌트의 템플릿이 DOM에 삽입되기 전에 실행됩니다. 즉, DOM이 아직 생성되지 않았기 때문에, DOM 요소에 직접 접근할 수 없어요.
또한, 이 단계에서는 추가적인 설정 or 준비 작업을 할 수 있습니다.
특정 조건에 따라 마운트를 방지하거나, 최적화 작업을 수행하기 위한 로직을 추가할 수 있어요.
사용 방법은 다음과 같습니다.
beforeMount.vue
export default {
data() {
return {
isVisible: false,
};
},
beforeMount() {
console.log("컴포넌트가 마운트되기 전입니다.");
// 조건에 따라 마운트를 방지할 수 있음
if (this.shouldPreventMount()) {
this.isVisible = false;
} else {
this.isVisible = true;
}
},
methods: {
shouldPreventMount() {
// 특정 조건에 따라 true/false 반환
return false; // 예시로 false 반환
},
},
};
2-4. mounted (마운트)
mounted는 컴포넌트가 DOM에 마운트된 후, 호출됩니다.
이 단계에서는 컴포넌트의 템플릿이 실제 DOM에 삽입된 상태이므로, DOM 요소에 직접 접근할 수 있어요. 즉, DOM 조작 or 외부 라이브러리와의 통합 작업을 수행하기에 적합합니다.
또한, API 호출 or 타이머 설정 등의 비동기 작접을 수행할 수 있어요.
이 단계는 컴포넌트가 화면에 표시된 후, 필요한 초기화 작업을 수행하는 데 유용합니다.
사용 방법은 다음과 같아요.
mounted.vue
export default {
data() {
return {
message: "",
};
},
mounted() {
console.log("컴포넌트가 마운트되었습니다.");
this.fetchData();
// DOM 요소에 직접 접근하기
this.$nextTick(() => {
const element = this.$el.querySelector(".my-element");
if (element) {
element.style.color = "blue"; // DOM 스타일 변경
}
});
},
methods: {
fetchData() {
// API 호출 예시
fetch("https://api.test.com/data")
.then((response) => response.json())
.then((data) => {
this.message = data.message;
});
},
},
};
2-5. beforeUpdate (업데이트 전)
beforeUpdate는 컴포넌트의 데이터가 변경되어 다시 렌더링되기 전에 호출됩니다.
이 단계에서는 상태가 업데이트되기 전에 필요한 작업을 수행할 수 있어요.
이는 데이터가 변경된 후, 실제 DOM 업데이트가 이루어지기 전에 호출되므로, 변경된 데이터에 기반한 추가 작업을 수행할 수 있습니다. 하지만, 이는 DOM 업데이트 전이므로 새로운 DOM 상태에 접근할 수 없어요. 대신 이전 데이터 상태를 기반으로 작업으로 할 수 있습니다.
beforeUpdate는 불필요한 작업을 방지하기 위해 조건부 로직을 추가하여, 특정 상황에서만 업데이트를 수행하도록 할 수 있어요.
사용 방법은 다음과 같습니다.
beforeUpdate.vue
export default {
data() {
return {
count: 0,
};
},
beforeUpdate() {
console.log("컴포넌트가 업데이트되기 전입니다. 현재 count:", this.count);
// 특정 조건에 따라 추가적인 작업을 수행할 수 있음
if (this.count > 10) {
console.log("count가 10을 초과했습니다.");
}
},
methods: {
increment() {
this.count++;
},
},
};
2-6. updated (업데이트)
updated는 컴포넌트가 데이터 변경으로 인해 DOM이 업데이트된 후, 호출됩니다.
이 단계에서는 컴포넌트의 템플릿이 새로운 데이터에 따라 다시 렌더링된 이후의 상태를 다룰 수 있어요.
또한, 새로운 DOM 상태에 접근할 수 있으므로, DOM 조작 or 외부 라이브러리와의 상호작용을 수행할 수 있습니다.
그리고 컴포넌트의 상태가 변경되었음을 확인하고, 필요에 따라 추가 작업을 수행할 수 있어요.
updated는 데이터가 변경될 때마다 호출되므로, 불필요한 작업을 피하기 위해 조건문을 사용하여, 특정 상황에서만 코드를 실행하는 것이 좋아요.
사용 방법은 다음과 같습니다.
updated.vue
export default {
data() {
return {
count: 0,
};
},
updated() {
console.log("컴포넌트가 업데이트되었습니다. 현재 count: ", this.count);
// DOM 요소에 직접 접근하여, 스타일 변경
const element = this.$el.querySelector(".count-display");
if (element) {
element.style.color = this.count > 5 ? "red" : "black";
}
},
methods: {
increment() {
this.count++;
},
},
};
2-7. beforeUnmount(언마운트 전)
이번에 Vue 3에서 새로 도입된 beforeUnmount입니다. (Vue 2에서는 beforeDestroy를 사용했어요! 이름만 변경 되었습니다.)
beforeUnmount는 Vue 컴포넌트가 언마운트(소멸)되기 직전에 호출됩니다.
이 단계에서는 컴포넌트가 더 이상 필요없게 되었을 때, 정리 작업을 수행하는 데 사용됩니다. 정리 작업으로는 이벤트 리스터 제거, 타이머 정리 등이 있어요.
또한, 이 단계에서는 컴포넌트의 데이터 or 메서드에 접근할 수 있습니다.
DOM 요소에도 접근할 수 있지만, 이후에는 해당 요소가 더 이상 존재하지 않게 되므로, DOM 조작은 주의해야 해요.
beforeUnmount.vue
export default {
data() {
return {
timer: null,
};
},
mounted() {
// 타이머 설정
this.timer = setInterval(() => {
console.log("타이머 작동 중");
}, 1000);
},
beforeUnmount() {
console.log("컴포넌트가 언마운트되기 전입니다.");
// 타이머 정리
clearInterval(this.timer);
console.log("타이머가 정리되었습니다.");
},
};
2-8. unmounted (언마운트)
unmounted도 Vue 3에서 도입되었어요. (Vue 2에서는 destroyed를 사용했습니다. 이 또한, 이름만 변경 되었습니다.)
이 단계에서는 컴포넌트가 DOM에서 완전히 제거된 후, 호출됩니다.
또한, 컴포넌트가 더 이상 화면에 존재하지 않으므로, 상태를 확인하거나 후속 작업을 수행할 수 있어요.
하지만, 컴포넌트의 DOM 요소가 이미 제거되었기 때문에, DOM에 직접 접근할 수 없습니다. 그리고 컴포넌트의 데이터에 접근할 수 있지만, 이미 DOM은 제거된 상태이므로, 상태를 기반으로 한 추가 로직을 실행할 수 있어요.
unmounted는 주로 이벤트 리스너 제거 및 타이머 정리 등과 같은 후속 정리 작업을 수행하기 위한 용도로 사용될 수 있습니다.
사용 방법은 다음과 같아요.
unmounted.vue
export default {
data() {
return {
timer: null,
};
},
mounted() {
// 타이머 설정
this.timer = setInterval(() => {
console.log("타이머 작동 중");
}, 1000);
},
beforeUnmount() {
console.log("컴포넌트가 언마운트되기 전입니다.");
// 타이머 정리
clearInterval(this.timer);
},
unmounted() {
console.log('컴포넌트가 언마운트되었습니다.');
// 추가 정리 작업 수행 가능
}
};
3. 정리하며
지금까지 생명주기와 생명주기 훅들에 대해 알아보았습니다.
이 생명주기 훅들은 컴포넌트의 상태에 따라 특정한 시점에 실행되므로, 데이터 초기화, DOM 조작, 이벤트 리스너 등록 및 헤제 등의 작업을 적절한 훅에서 실행하여, 컴포넌트의 로직을 제어할 수 있어요.
참고
'Front-End Study > Vue.js' 카테고리의 다른 글
| Event Bus (0) | 2024.10.29 |
|---|---|
| scrollBehavior (0) | 2024.10.22 |
| AG Grid의 Grid Option (0) | 2024.08.07 |
| AG Grid (3) | 2024.07.22 |
| Helper 함수 (0) | 2024.07.09 |