Vue의 생명주기(lifecycle) 는 Vue 인스턴스가 생성되고 업데이트되며 파괴될 때까지의 일련의 과정을 의미합니다.
Vue는 이 과정을 여러 단계로 나누어 각 단계에서 특정 작업을 수행할 수 있는 생명주기 훅(lifecycle hook) 을 제공합니다.
Vue 생명주기 흐름
Vue의 생명주기는 다음과 같은 순서로 진행됩니다
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
각 생명주기 훅은 특정 시점에 자동으로 호출되며, 그에 따라 특정 로직을 실행할 수 있습니다.
1. beforeCreate
시점: Vue 인스턴스가 생성되기 직전.
특징: data, computed, watch 등의 옵션이 설정되지 않았기 때문에 인스턴스의 초기화가 아직 완료되지 않은 상태입니다.
용도: 데이터가 아직 설정되지 않았거나, 인스턴스가 초기화되기 전에 해야 할 작업이 있을 경우 사용합니다.
2. created
시점: Vue 인스턴스가 생성되고, 데이터가 초기화된 후 호출됩니다.
특징: 데이터, 메소드, 계산된 속성 등 인스턴스가 초기화된 상태지만, DOM은 아직 렌더링되지 않았습니다.
용도: 서버에서 데이터를 가져오거나, 인스턴스가 생성된 후에 추가적인 로직을 수행할 때 사용합니다.
3. beforeMount
시점: 컴포넌트가 마운트되기 직전, 즉 DOM에 처음 추가되기 전입니다.
특징: 아직 렌더링된 DOM 요소는 없지만, 템플릿이 컴파일된 상태입니다.
용도: 초기 렌더링 전에 DOM을 준비해야 할 때 사용합니다.
4. mounted
시점: 컴포넌트가 마운트된 후, 즉 DOM에 추가된 후 호출됩니다.
특징: DOM에 접근할 수 있으며, 외부 라이브러리나 API 요청 등을 사용할 수 있습니다.
용도: DOM을 직접 조작하거나, 외부 API에서 데이터를 가져오는 등의 작업에 적합합니다.
5. beforeUpdate
시점: 데이터가 변경되어 DOM 업데이트가 일어나기 직전에 호출됩니다.
특징: DOM은 아직 업데이트되지 않았습니다.
용도: DOM 업데이트 전에 필요한 작업을 처리할 수 있습니다. 예를 들어, 특정 데이터 변경에 따른 처리가 필요할 때 사용합니다.
6. updated
시점: 데이터가 변경되어 DOM이 업데이트된 후 호출됩니다.
특징: DOM이 업데이트된 후에 호출되므로, DOM이 완전히 반영된 상태에서 작업을 진행할 수 있습니다.
용도: DOM 변경 후 후속 작업이나 애니메이션 등을 처리할 때 사용됩니다.
7. beforeUnmount
시점: 컴포넌트가 파괴되기 직전에 호출됩니다.
특징: 컴포넌트가 사라지기 전 상태에서 호출되므로, 자원을 해제하거나 리소스를 정리할 때 사용합니다.
용도: 타이머나 이벤트 리스너 제거 등의 작업에 적합합니다.
8. unmounted
시점: 컴포넌트가 파괴된 후, 즉 DOM에서 완전히 제거된 후 호출됩니다.
특징: 컴포넌트가 완전히 사라졌으므로 더 이상 상태나 DOM을 변경할 수 없습니다.
용도: 정리 작업을 하거나, 남아 있는 이벤트 리스너나 인터벌 등을 제거하는 데 사용됩니다.
beforeUpdate vs updated
beforeUpdate와 updated는 모두 데이터 변경 후 호출되는 생명주기 훅입니다.
차이점은 바로 "DOM 업데이트 직전"과 "DOM 업데이트 직후"의 시점 차이입니다.
beforeUpdate:
시점: 데이터가 변경되었지만, DOM이 아직 업데이트되기 전에 호출됩니다.
특징: 데이터 변경 사항이 UI에 반영되기 전에 호출됩니다.
용도: 이 훅에서 데이터 변경이 이루어지면 DOM에 반영되지 않기 때문에 필요한 추가 작업을 할 수 없습니다. 예를 들어, UI에서 데이터 변경을 보고 무엇을 해야 하는지 결정을 내릴 수 있지만, 그 시점에서는 DOM에 반영되지 않았기 때문에 상태 변화가 즉시 반영되지 않습니다.
updated:
시점: 데이터가 변경되고, DOM이 이미 업데이트된 후에 호출됩니다.
특징: 데이터 변경 사항이 UI에 반영된 후 호출됩니다.
용도: DOM 업데이트 이후의 작업을 처리할 수 있습니다. 예를 들어, 애니메이션을 실행하거나, 업데이트된 DOM을 기반으로 추가적인 로직을 수행할 수 있습니다.
