Vue.js 라이프사이클

Vue.js 애플리케이션에서 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 제거되는 과정에서 발생하는 다양한 이벤트 및 훅(생명주기 메서드)을 의미합니다. 이러한 라이프사이클 훅을 활용하면 컴포넌트의 동작을 특정 시점에 제어하거나 커스터마이징할 수 있습니다. Vue.js에서 컴포넌트의 주요 라이프사이클 훅은 다음과 같습니다

 

1. beforeCreate: 컴포넌트 인스턴스가 생성되고 데이터 초기화 이전에 호출됩니다. 이 시점에서 컴포넌트의 데이터 및 이벤트 리스너 등이 아직 초기화되지 않았습니다.

 

2. created: 컴포넌트 인스턴스가 생성되고 데이터 초기화가 완료된 후에 호출됩니다. 이 시점에서 컴포넌트의 데이터와 이벤트 리스너가 초기화되었습니다.

 

3. beforeMount: 컴포넌트 템플릿이 가상 DOM으로 컴파일된 후, 실제 DOM에 마운트되기 전에 호출됩니다.

 

4. mounted: 컴포넌트 템플릿이 실제 DOM에 성공적으로 마운트된 후에 호출됩니다. 이 시점에서 컴포넌트는 화면에 렌더링되었습니다.

 

5. beforeUpdate: 컴포넌트의 데이터가 변경되어 업데이트되기 직전에 호출됩니다. 이 시점에서 가상 DOM이 업데이트되지만 아직 실제 DOM에는 반영되지 않습니다.

 

6. updated: 컴포넌트의 데이터가 변경되어 업데이트된 후에 호출됩니다. 이 시점에서 실제 DOM이 업데이트되고 사용자에게 변경된 내용이 표시됩니다.

 

7. beforeDestroy: 컴포넌트가 파기되기 전에 호출됩니다. 이 시점에서 컴포넌트의 데이터 및 이벤트 리스너를 정리하거나 리소스를 해제하는 작업을 수행할 수 있습니다.

 

8. destroyed: 컴포넌트가 파기된 후에 호출됩니다. 컴포넌트가 더 이상 사용되지 않는 시점에 발생하며, 이 시점에서 컴포넌트와 관련된 모든 리소스가 정리됩니다.

 

9. activated (Vue Router specific): Vue Router와 함께 사용할 때, 컴포넌트가 활성화되면 호출됩니다.

 

10. deactivated (Vue Router specific): Vue Router와 함께 사용할 때, 컴포넌트가 비활성화되면 호출됩니다.

 

라이프사이클 훅은 컴포넌트의 동작을 제어하고 비동기 작업을 수행하기 위한 중요한 도구입니다. 이러한 훅을 사용하여 컴포넌트가 생성, 업데이트, 파기될 때 필요한 작업을 수행하고 애플리케이션의 동작을 커스터마이징할 수 있습니다. Vue.js의 라이프사이클 훅은 컴포넌트 개발 및 디버깅에 유용한 기능을 제공합니다.