Vue.js의 lifecycle hooks는 무엇인가요?
_____A1: Vue.js의 Lifecycle Hooks는 컴포넌트가 생성되고 업데이트되며 파괴되는 일련의 과정(생명주기) 중 특정 시점에 자동으로 호출되는 메서드들입니다. 이를 통해 개발자는 컴포넌트의 상태 변화에 맞춰 추가 작업을 수행할 수 있습니다.
---
Q2: Vue 3에서 주로 사용하는 Lifecycle Hooks에는 어떤 것들이 있나요?
A2: Vue 3의 주요 Lifecycle Hooks는 다음과 같습니다.
- `beforeCreate`: 인스턴스가 초기화되기 전 호출
- `created`: 인스턴스가 생성되고 데이터 관찰이 시작된 후 호출
- `beforeMount`: 템플릿이 DOM에 마운트되기 직전 호출
- `mounted`: 인스턴스가 DOM에 마운트된 후 호출
- `beforeUpdate`: 데이터 변경으로 DOM이 업데이트되기 직전 호출
- `updated`: DOM 업데이트가 완료된 후 호출
- `beforeUnmount`: 컴포넌트가 파괴되기 직전 호출
- `unmounted`: 컴포넌트가 완전히 파괴된 후 호출
---
Q3: Vue.js에서 Lifecycle Hooks를 어떻게 사용하나요?
A3: Vue 3 Options API에서는 컴포넌트 옵션에 메서드를 정의하여 사용합니다. 예를 들어:
```javascript
export default {
mounted() {
console.log('컴포넌트가 DOM에 마운트되었습니다.');
},
};
```
Composition API에서는 Vue가 제공하는 `onMounted`, `onUpdated` 같은 함수들을 import하여 사용합니다.
```javascript
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('컴포넌트가 DOM에 마운트되었습니다.');
});
},
};
```
---
Q4: Lifecycle Hooks는 어떤 상황에서 유용하게 쓰이나요?
A4:
- API 호출을 컴포넌트가 준비된 후(`mounted`)에 실행할 때
- DOM 조작이나 외부 라이브러리 초기화 시점 제어
- 컴포넌트가 업데이트되거나 파괴될 때 리소스 정리(clean up)
- 상태 초기화 및 반응형 데이터 설정 시점 제어 등에 활용됩니다.
---
Q5: Vue 3에서 Composition API의 Lifecycle Hooks 함수들은 어디서 import해야 하나요?
A5: `vue` 패키지에서 import 합니다.
```javascript
import { onMounted, onUnmounted, onUpdated } from 'vue';
```
---
Q6: Lifecycle Hooks 호출 순서는 어떻게 되나요?
A6: 일반적인 컴포넌트 생명주기 순서는 다음과 같습니다.
1. `beforeCreate`
2. `created`
3. `beforeMount`
4. `mounted`
5. 데이터 변경 발생 ▶ `beforeUpdate`
6. `updated`
7. 컴포넌트 제거 시 ▶ `beforeUnmount`
8. `unmounted`
---
Q7: `created`와 `mounted`의 차이는 무엇인가요?
A7:
- `created`: 컴포넌트 인스턴스가 생성되고 데이터가 설정된 시점, DOM이 아직 생성되지 않은 상태입니다.
- `mounted`: 컴포넌트의 템플릿이 실제 DOM에 붙은 후 호출되므로, DOM 조작이 가능한 시점입니다.
---
Q8: Vue 2와 Vue 3의 Lifecycle Hooks 차이점은 무엇인가요?
A8: Vue 3는 기본적으로 Composition API를 지원하며, Options API 방식과 다르게 Composition API 전용 Hooks(`onMounted` 등)를 제공합니다. Options API에서는 기존과 동일한 메서드(`mounted` 등)를 사용합니다. 또한, 일부 내부 동작이 최적화되었고, Vue 3 고유의 추가 Hook들도 있습니다.
---
Q9: Lifecycle Hooks 내에서 비동기 처리도 가능한가요?
A9: 네, 가능합니다. 예를 들어 `mounted` 안에서 비동기 API 요청을 수행할 수 있으며, `async/await`도 문제없이 사용할 수 있습니다.
```javascript
mounted: async function() {
const data = await fetchData();
this.items = data;
}
```
---
Q10: 컴포넌트가 여러 개 중첩되었을 때 각 Lifecycle Hook는 어떻게 작동하나요?
A10: 부모-자식 컴포넌트 각각의 Lifecycle Hooks가 그 컴포넌트의 상태에 따라 독립적으로 호출됩니다. 예를 들어, 부모가 `mounted` 될 때 자식들 역시 이미 마운트되었거나 이어서 마운트됩니다. Hooks 호출 순서는 깊이 우선 트리 탐색 순서와 유사합니다.
---
이상으로 Vue.js Lifecycle Hooks에 대한 FAQ였습니다.
작성자:
김윤서 [비회원]
| 작성일자: 1년 전
2024-09-14 17:14:39
조회수: 156 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
조회수: 156 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.
