[vue.js] vue 개념 라이프 사이클 관련 개념 정리

최근 프론트 관련 랜덤 문제를 푼적이 있는데.

 

"Vue.js 컴포넌트의 라이프사이클 훅 중에서 DOM에 마운트된 후에 호출되는 훅은 무엇인가요?" 라는 질문에서 라이프 사이클이 정확히 기억나지 않아서 이참에 한 번 정리하려 합니다.

---

크게 라이프 사이클 훅은 아래와 같이 있습니다.

 

• mounted: 컴포넌트의 템플릿이 렌더링되고 DOM에 마운트된 후 호출됩니다.
• created: 컴포넌트가 생성된 직후 호출됩니다.
• beforeMount: DOM에 마운트되기 전에 호출됩니다.
• updated: 데이터 변경 후 렌더링된 후 호출됩니다.
• destroyed: 컴포넌트가 파괴될 때 호출됩니다.

그림1. 라이프 사이클 흐름도

 

`흐름도에 따라 하나 하나 각각의 매서드들이 무엇을 하는지  설명하겠습니다.`

---

beforeCreate

• 호출 시점: Vue 인스턴스가 초기화되기 직후. 아직 데이터와 이벤트 시스템이 초기화되기 전.
• 역할:
  • Vue 컴포넌트의 data, methods, computed와 같은 옵션이 정의되기 전에 호출됩니다.
  • 인스턴스가 생성되기 전 설정 작업(매우 드문 경우)에서 사용됩니다.

beforeCreate() {
  console.log('beforeCreate: 컴포넌트 초기화 시작');
}

 

created

• 호출 시점: 컴포넌트의 data, methods, computed 등이 초기화된 직후.
• 역할:
  • DOM에 접근할 수 없는 상태에서, 반응형 데이터 초기화나 API 호출 같은 로직을 실행.
  • 데이터와 메서드가 정의되었으므로, 데이터를 설정하거나 비동기 작업(API 호출 등)을 시작할 수 있습니다.

created() {
  console.log('created: 데이터와 메서드 초기화 완료');
  this.fetchData(); // API 호출
}

 

beforeMount

• 호출 시점: DOM에 렌더링되기 직전. 아직 가상 DOM이 실제 DOM에 마운트되지 않은 상태.
• 역할:
  • 렌더링 전 DOM 조작이 필요한 경우에 사용.
  • 템플릿이 가상 DOM으로 컴파일된 상태에서 데이터가 초기화되었으므로, 렌더링 전 마지막 작업을 처리할 수 있습니다.

beforeMount() {
  console.log('beforeMount: DOM 렌더링 직전');
}

 

mounted

• 호출 시점: 컴포넌트가 DOM에 마운트된 직후.
• 역할:
  • 실제 DOM 요소에 접근 가능.
  • DOM 조작 또는 외부 라이브러리(jQuery, D3 등)를 초기화하는 데 사용.
  • 이벤트 리스너 추가, 애니메이션 트리거 등 초기 UI 설정에 적합.

beforeUpdate

• 호출 시점: 반응형 데이터가 변경되어 DOM이 다시 렌더링되기 직전.
• 역할:
  • DOM이 업데이트되기 전에 작업을 실행.
  • 데이터 변경에 따른 DOM 업데이트 전에 실행될 코드를 작성.

updated

• 호출 시점: 데이터 변경으로 DOM 업데이트가 완료된 직후.
• 역할:
  • 데이터 변경 후 DOM 상태를 확인하거나, 데이터 업데이트에 따라 추가 로직 실행.
  • DOM 업데이트 후 DOM을 조작해야 할 경우 적합.

beforeUnmount (Vue 3, Vue 2에서는 beforeDestroy)

• 호출 시점: 컴포넌트가 파괴되기 직전.
• 역할:
  • 컴포넌트가 제거되기 전 정리 작업.
  • 이벤트 리스너 제거, 타이머 정리, 외부 라이브러리 해제 등

beforeUnmount() {
  console.log('beforeUnmount: 컴포넌트 파괴 직전');
  clearInterval(this.timer); // 타이머 정리
}

 

unmounted (Vue 3, Vue 2에서는 destroyed)

• 호출 시점: 컴포넌트가 DOM에서 제거된 직후.
• 역할:
  • 컴포넌트가 제거된 후의 후속 정리 작업.
  • 메모리 누수를 방지하기 위한 정리 코드 작성.

 

하나의 컴포넌트 라이프사이클 한 주기가 끝이 납니다.

 

---

 

간단히 요약하면 아래와 같습니다.

DOM 렌더링 및 mounted 관련 순서

1. beforeCreate: 데이터와 DOM 모두 준비되지 않은 상태.
2. created: 데이터는 준비되었지만 DOM에 접근 불가.
3. beforeMount: DOM에 렌더링되기 전 마지막 작업.
4. mounted: 실제 DOM에 컴포넌트가 렌더링 완료. DOM 조작 및 외부 라이브러리 초기화 가능.

각 훅의 주요 사용 사례 요약

훅주요 목적 및 사용 사례

beforeCreate	인스턴스 초기화 이전 단계. 매우 드문 경우에만 사용.
created	초기 데이터 설정, API 호출, 반응형 데이터 초기화. DOM 접근 불가.
beforeMount	DOM 렌더링 직전 로직 실행.
mounted	DOM 조작, 외부 라이브러리 초기화, 이벤트 리스너 등록.
beforeUpdate	DOM 업데이트 전 데이터 검증, 특정 조건 처리.
updated	DOM 업데이트 후 DOM 상태 확인, 추가 작업 수행.
beforeUnmount	이벤트 리스너 제거, 외부 리소스 해제 등 정리 작업.
unmounted	컴포넌트가 완전히 제거된 후 후속 정리 작업.

---

 

그 외 

 

setup은 Vue 3에서 제공하는 Composition API의 핵심 함수입니다. 컴포넌트의 로직을 정의하고 반응형 데이터를 초기화하거나, 생명주기 훅을 설정할 때 사용됩니다. 하지만 setup 자체는 Vue.js의 전통적인 라이프사이클 훅과는 약간 다른 개념입니다.

setup 호출 시점

setup은 컴포넌트가 생성되는 초기 단계에서 호출됩니다. 이는 created 훅보다도 먼저 실행되며, 아래와 같은 시점에서 호출됩니다:

1. 컴포넌트가 인스턴스화되기 전에 호출됩니다.
2. 반응형 데이터(reactive, ref)를 정의하거나, 컴포넌트 내부 로직을 초기화합니다.
3. DOM이 아직 렌더링되기 전입니다(즉, beforeMount보다 먼저 실행).

setup의 역할

setup은 다음과 같은 작업을 수행할 때 유용합니다:

• 반응형 상태 정의 (ref, reactive)
• 계산 속성 (computed) 정의
• 이벤트 핸들러 정의
• Composition API 훅 사용 (watch, onMounted 등)
• 외부 API 호출 및 초기화 작업

 

이상 정리 끝!