Q: Vue.js에서 라이프사이클 훅의 순서는 어떻게 되나요?
A: Vue.js 컴포넌트가 생성되고 파괴될 때 호출되는 라이프사이클 훅은 기본적으로 다음 순서로 실행됩니다.
1. beforeCreate
- 컴포넌트 인스턴스가 초기화되기 직전
- 데이터와 이벤트 설정 전의 단계
2. created
- 데이터와 이벤트 설정이 완료된 상태
- DOM 접근 불가
3. beforeMount
- 템플릿이 가상 DOM으로 변환되어 마운트되기 직전
4. mounted
- 실제 DOM에 컴포넌트가 마운트된 후 호출
- DOM 접근 가능
5. beforeUpdate
- 데이터가 변경되어 DOM이 다시 렌더링되기 직전
6. updated
- 데이터 변경 후 DOM이 갱신된 상태
7. beforeUnmount (Vue 3) / beforeDestroy (Vue 2)
- 컴포넌트가 제거되기 직전
8. unmounted (Vue 3) / destroyed (Vue 2)
- 컴포넌트가 완전히 제거된 후
---
요약
```
beforeCreate → created → beforeMount → mounted →
beforeUpdate → updated → beforeUnmount/beforeDestroy → unmounted/destroyed
```
이 순서를 이해하면 컴포넌트 동작 시점에 적절하게 코드를 작성할 수 있습니다.
Vue.js에서 <a href='https://sangseek.com/sangseeks/라이프사이클 훅/ko'>라이프사이클 훅</a>은 컴포넌트의 생애 주기 동안 특정 시점에 호출되는 메서드입니다. 이러한 훅은 컴포넌트가 생성되고, 업데이트되고, 파괴되는 과정에서 특정 작업을 수행할 수 있도록 해줍니다. Vue.js의 라이프사이클 훅은 크게 생성, 업데이트, 파괴의 세 가지 단계로 나눌 수 있으며, 각 단계에서 호출되는 훅의 순서는 다음과 같습니다. 1. <a href='https://sangseek.com/sangseeks/생성 단계/ko'>생성 단계</a> (Creation Phase) - <a href='https://sangseek.com/sangseeks/beforeCreate/ko'>beforeCreate</a> : 컴포넌트 인스턴스가 생성되기 직전에 호출됩니다. 이 시점에서는 데이터와 이벤트가 초기화되지 않았습니다. - created : 컴포넌트 인스턴스가 생성된 후 호출됩니다. 이 시점에서는 데이터와 이벤트가 초기화되었지만, DOM은 아직 생성되지 않았습니다. API 호출이나 초기 데이터 설정을 수행하기에 적합한 시점입니다. 2. <a href='https://sangseek.com/sangseeks/마운트 단계/ko'>마운트 단계</a> (Mounting Phase) - <a href='https://sangseek.com/sangseeks/beforeMount/ko'>beforeMount</a> : 컴포넌트가 DOM에 마운트되기 직전에 호출됩니다. 이 시점에서는 템플릿이 컴파일되고, 가상 DOM이 생성되었지만 실제 DOM에는 아직 반영되지 않았습니다. - mounted : 컴포넌트가 DOM에 마운트된 후 호출됩니다. 이 시점에서는 실제 DOM에 접근할 수 있으며, 외부 라이브러리와의 통합이나 DOM 조작을 수행하기에 적합합니다. 3. <a href='https://sangseek.com/sangseeks/업데이트 단계/ko'>업데이트 단계</a> (Updating Phase) - <a href='https://sangseek.com/sangseeks/beforeUpdate/ko'>beforeUpdate</a> : 데이터가 변경되어 컴포넌트가 업데이트되기 직전에 호출됩니다. 이 시점에서는 변경된 데이터에 대한 접근이 가능하지만, DOM은 아직 업데이트되지 않았습니다. - <a href='https://sangseek.com/sangseeks/updated/ko'>updated</a> : 컴포넌트가 업데이트된 후 호출됩니다. 이 시점에서는 변경된 데이터에 따라 DOM이 업데이트된 상태입니다. 이 훅에서는 DOM에 대한 추가적인 조작을 피하는 것이 좋습니다. 4. <a href='https://sangseek.com/sangseeks/파괴 단계/ko'>파괴 단계</a> (Destruction Phase) - beforeDest<a href='https://sangseek.com/sangseeks/roy/ko'>roy</a> : 컴포넌트가 파괴되기 직전에 호출됩니다. 이 시점에서는 컴포넌트의 데이터와 이벤트가 여전히 유효하지만, 더 이상 사용되지 않을 것입니다. 정리 작업을 수행하기에 적합합니다. - destroyed : 컴포넌트가 파괴된 후 호출됩니다. 이 시점에서는 모든 데이터와 이벤트가 해제되었으며, DOM 요소도 제거되었습니다. 이 훅에서는 메모리 누수를 방지하기 위한 추가적인 정리 작업을 수행할 수 있습니다. 5. 오류 처리 단계 (Error Handling Phase) - errorCaptured : 자식 컴포넌트에서 발생한 오류를 감지할 때 호출됩니다. 이 훅은 오류를 처리하고, 오류가 발생한 자식 컴포넌트의 정보를 제공받습니다. 이 훅을 사용하여 오류를 로깅하거나 사용자에게 오류 메시지를 표시할 수 있습니다. 라이프사이클 훅의 순서 요약 1. beforeCreate 2. created 3. beforeMount 4. mounted 5. beforeUpdate 6. updated 7. <a href='https://sangseek.com/sangseeks/beforeDestroy/ko'>beforeDestroy</a> 8. destroyed 9. errorCaptured (필요 시) 이러한 라이프사이클 훅을 이해하고 적절히 활용하면 Vue.js 애플리케이션의 성능과 유지보수성을 높일 수 있습니다. 각 훅은 특정 시점에 호출되므로, 필요한 작업을 적절한 시점에 수행하여 애플리케이션의 동작을 최적화할 수 있습니다.
