[콜럼Vue스] 생명주기 메서드(Lifecycle Methods)

 

Vue.js 애플리케이션에서 Vue 인스턴스나 컴포넌트가 생성되고, DOM에 렌더링되며, 업데이트되거나 파괴될 때 특정 단계에서 실행되는 메서드임. Vue 컴포넌트는 생성에서부터 파괴에 이르기까지 여러 가지 상태를 거치며, 이 과정에서 특정 작업을 수행할 수 있는 훅(Hook)을 제공함.

이러한 생명주기 메서드를 활용하면, Vue 컴포넌트의 각 단계에서 API 호출, 타이머 설정, 리소스 해제 등의 작업을 적절한 시점에 실행할 수 있음.

1. Vue 인스턴스 생명주기

Vue 컴포넌트는 아래와 같은 주요 단계로 나뉘며, 각 단계에서 생명주기 메서드가 호출됨:

1. 생성 단계: Vue 인스턴스가 초기화됨.
2. DOM에 마운트 단계: 인스턴스가 DOM에 연결되어 화면에 렌더링됨.
3. 업데이트 단계: 데이터가 변경되어 화면이 다시 렌더링됨.
4. 파괴 단계: Vue 인스턴스가 파괴되어 메모리에서 해제됨.

 

2. 주요 생명주기 메서드

각 단계에서 호출되는 주요 생명주기 메서드는 다음과 같음:

(1) beforeCreate

• Vue 인스턴스가 생성되기 전 호출됨.
• 이 시점에는 data, methods, computed 등 Vue 인스턴스의 속성에 접근할 수 없음.

beforeCreate() {
  console.log('Vue 인스턴스가 생성되기 전입니다.');
}

(2) created

• Vue 인스턴스가 생성된 후 호출되며, data, methods 등 인스턴스의 속성에 접근 가능.
• API 호출이나 데이터 초기화 등의 작업을 주로 이 시점에 수행함.

created() {
  console.log('Vue 인스턴스가 생성되었습니다.');
  console.log(this.message); // `data`에 정의된 값에 접근 가능
}

• 이 시점에서는 아직 DOM에 마운트되지 않았음.

(3) beforeMount

• 인스턴스가 DOM에 마운트되기 직전 호출됨.
• 렌더링 직전에 무언가를 수정하거나 준비 작업을 할 때 사용됨.

beforeMount() {
  console.log('Vue 인스턴스가 DOM에 마운트되기 직전입니다.');
}

(4) mounted

• 인스턴스가 DOM에 완전히 마운트된 후 호출됨.
• 이 시점에서 컴포넌트는 실제로 DOM에 렌더링된 상태이며, DOM 조작이나 외부 라이브러리를 이용한 DOM 접근 작업을 이 단계에서 수행할 수 있음.

mounted() {
  console.log('Vue 인스턴스가 DOM에 마운트되었습니다.');
  // DOM 요소에 접근 가능
  console.log(this.$refs.myElement);
}

• DOM 조작이나 외부 라이브러리와의 통합 작업은 주로 이 시점에 이루어짐.

(5) beforeUpdate

• 데이터가 변경되어 DOM이 업데이트되기 직전에 호출됨.
• 데이터가 변경되기 전과 후의 상태를 비교하거나, 업데이트가 일어나기 전에 로직을 처리하고 싶을 때 유용함.

beforeUpdate() {
  console.log('데이터가 변경되기 직전입니다.');
}

 

(6) updated

• 데이터가 변경되어 DOM이 다시 렌더링된 후 호출됨.
• DOM이 업데이트된 후에 작업이 필요할 때 사용함. 성능 최적화를 위해 주의해서 사용해야 함.

updated() {
  console.log('데이터가 변경되어 DOM이 업데이트되었습니다.');
}

(7) beforeDestroy

• Vue 인스턴스가 파괴되기 직전 호출됨.
• 타이머나 이벤트 리스너 등 외부 리소스를 해제해야 할 때 사용됨.

beforeDestroy() {
  console.log('Vue 인스턴스가 파괴되기 직전입니다.');
}

(8) destroyed

• Vue 인스턴스가 완전히 파괴된 후 호출됨.
• 인스턴스와 관련된 모든 바인딩 및 리스너가 제거되며, 더 이상 Vue 인스턴스는 동작하지 않음.

destroyed() {
  console.log('Vue 인스턴스가 완전히 파괴되었습니다.');
}

---

3. 생명주기 메서드의 활용 예시

(1) API 호출

데이터를 서버에서 받아와 컴포넌트에 렌더링해야 할 경우, **created**나 mounted 단계에서 API 호출을 실행함.

created() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      this.items = data;
    });
}

(2) 타이머 설정 및 해제

컴포넌트가 렌더링될 때 타이머를 설정하고, 컴포넌트가 파괴될 때 타이머를 해제하는 경우 **mounted**와 **beforeDestroy**를 사용함.

mounted() {
  this.interval = setInterval(() => {
    this.updateData();
  }, 1000);
},
beforeDestroy() {
  clearInterval(this.interval); // 타이머 해제
}

---

4. 생명주기 메서드의 순서

Vue의 생명주기 메서드는 다음 순서로 실행됨:

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. 데이터 업데이트 발생:
   • beforeUpdate
   • updated
6. 컴포넌트 파괴:
   • beforeDestroy
   • destroyed

---

5. 생명주기 메서드를 활용한 실용적인 예시

(1) DOM 요소에 접근 및 초기화

mounted 메서드를 사용해 DOM 요소에 직접 접근하고, DOM 조작을 수행하는 예시.

mounted() {
  const element = this.$refs.myInput;
  element.focus(); // DOM 요소에 직접 접근하여 포커스를 설정
}

(2) 컴포넌트 파괴 시 리소스 정리

컴포넌트가 파괴될 때 이벤트 리스너 제거 등 리소스 정리를 수행하는 예시.

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

---

요약:

• **생명주기 메서드(Lifecycle Methods)**는 Vue 컴포넌트의 생성, 업데이트, 파괴 등 주요 단계에서 호출되는 메서드로, 각 단계에 맞는 작업을 처리할 수 있음.
• 주요 생명주기 메서드로는 created, mounted, beforeUpdate, updated, beforeDestroy, **destroyed**가 있음.
• 생명주기 메서드를 활용하여 API 호출, DOM 접근, 타이머 설정 및 해제, 리소스 정리 등의 작업을 적절한 시점에 수행할 수 있음.