[Vue.js] Vue.js 컴포넌트 라이프사이클

Vue.js 컴포넌트는 생성되고, 업데이트되며, 소멸하는 과정에서 특정한 라이프사이클 훅(Lifecycle Hook)을 가집니다. 이러한 라이프사이클 훅을 활용하여 컴포넌트의 다양한 상태에서 원하는 로직을 수행할 수 있습니다. Vue 컴포넌트의 주요 라이프사이클 훅에 대해 설명드리겠습니다.

 

• beforeCreate: 컴포넌트가 생성되기 전에 호출되는 단계입니다. Vue 인스턴스가 아직 초기화되지 않았기 때문에, 데이터나 컴포넌트의 DOM 요소에 접근할 수 없습니다.
• created: 컴포넌트가 생성된 후에 호출되는 단계입니다. Vue 인스턴스가 초기화되었으므로, 데이터를 설정하거나 컴포넌트 초기화 작업을 수행하기에 적절한 시점입니다. 하지만, 이 단계에서도 컴포넌트의 DOM 요소에는 접근할 수 없습니다.
• beforeMount: 컴포넌트가 DOM에 삽입되기 직전에 호출되는 단계입니다. 따라서, 컴포넌트의 템플릿이 렌더링되기 전에 로직을 수행할 수 있습니다.
• mounted: 컴포넌트가 DOM에 삽입된 후에 호출되는 단계입니다. 이 단계에서 컴포넌트의 DOM 요소에 접근하여 필요한 작업을 수행할 수 있습니다. 일반적으로 비동기 요청(Ajax 요청)이나 외부 라이브러리의 초기화를 처리하는데 사용됩니다.
• beforeUpdate: 컴포넌트가 재렌더링되기 직전에 호출되는 단계입니다. 데이터 변경으로 인해 컴포넌트가 업데이트되기 직전에 로직을 수행할 수 있습니다.
• updated: 컴포넌트가 재렌더링된 후에 호출되는 단계입니다. 데이터 변경으로 인해 컴포넌트가 업데이트된 후에 로직을 수행할 수 있습니다. 이 단계에서 데이터 변경에 의해 무한 루프에 빠지지 않도록 주의해야 합니다.
• beforeDestroy: 컴포넌트가 소멸되기 직전에 호출되는 단계입니다. 컴포넌트가 아직 DOM에서 분리되기 전에 처리해야 할 로직을 수행할 수 있습니다.
• destroyed: 컴포넌트가 소멸된 후에 호출되는 단계입니다. 컴포넌트와 관련된 모든 이벤트 리스너나 타이머 등을 해제하고, 메모리 누수를 방지하는 등의 마무리 작업을 수행할 수 있습니다.

 

라이프사이클 훅은 컴포넌트의 상태에 따라 특정한 로직을 실행하는데 유용하게 사용됩니다. 컴포넌트가 생성되고, 업데이트되며, 소멸하는 과정에서 필요한 작업을 적절한 시점에 수행할 수 있도록 라이프사이클 훅을 잘 활용하면 효율적인 Vue 애플리케이션을 개발할 수 있습니다.