[Vue] 컴포넌트 라이프 사이클 훅 (Lifecycle hook)

안드로이드에서와 마찬가지로 Vue(이하 뷰)에서도 라이프 사이클은 매우 중요한 부분이다.

컴포넌트가 생성 ▶ 파괴되는 과정에서 발생하는 각각의 라이프 사이클 훅 메서드를 적절히 활용해야 상황에 맞는 다양한 메서드를 응용하여 웹 또는 하이브리드 앱을 만들 수 있으며, 원하는 메서드를 적절한 타이밍에 실행할 수 있다.

 

아래는 뷰의 대표적인 라이프 사이클 훅이다.

---

• beforeCreate: 컴포넌트 인스턴스가 초기화되자마자 가장 먼저 실행되는 훅. 이 시점에는 데이터나 이벤트, 라이프 사이클 메서드 등이 아직 설정되지 않는다.
• created: 컴포넌트 인스턴스가 생성된 직후 실행되는 훅. 데이터와 메서드가 초기화되어 있어서 이 안에서 데이터를 변경할 수 있지만, 아직 DOM에 마운트되지 않아 DOM을 조작할 수 없다. 서버에서 데이터를 요청하여 받아오는 로직을 수행하기 좋은 타이밍이기 때문에 HTTP 관련 수행을 추천한다.
• beforeMount: template 또는 render 함수가 컴파일된 후, 그 결과가 DOM에 추가되기 바로 직전에 실행.
• mounted: 컴포넌트가 DOM에 마운트된 직후 실행. 이 시점에는 DOM에 직접 접근하거나 DOM을 조작할 수 있다.
• beforeUpdate: 컴포넌트의 데이터가 변경되어 다시 렌더링이 일어나기 전에 실행되는 훅. 이 시점에는 새로운 데이터에 접근할 수 있지만, 아직 DOM에는 반영되지 않는다.
• updated: 데이터 변경 후 가상 DOM으로 다시 렌더링하고 실제 DOM에 적용된 후 실행. 따라서 데이터 변경 후 화면 오소 제어와 관련된 로직을 추가하기 좋다. 다만, 이 단계에서 데이터를 변경하게 되면 무한루프에 빠질 수 있어서 주의 해야한다. 데이터 변경이 필요한 경우, computed / watch 와 같은 속성을 이용할 것.
• beforeDestroy: 컴포넌트가 파괴되기 직전에 실행되는 훅. 이 시점에서는 컴포넌트가 여전히 완전한 상태다.
• destroyed: 컴포넌트가 파괴된 후에 실행되는 훅. 모든 하위 컴포넌트, 지시자 등도 모두 파괴되어 있다.

---

아래의 다이어그램으로 보면 이해가 더 빠를 것 같다.

출처 : https://ko.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

 

뷰에서도 라이프 사이클이 중요하기 때문에 반드시 이해하고 프로그래밍 하도록 하자.