Vue.js의 생명주기 훅(Life Cycle Hooks)

Vue.js의 생명주기 훅(Life Cycle Hooks) 상세 분석

Vue.js에서 컴포넌트는 생성되고 DOM에 렌더링되며, 업데이트되고, 제거되는 전체 과정을 거칩니다. 이러한 각 단계를 "생명주기(Life Cycle)"라고 하며, 이 과정에서 특정한 작업을 수행할 수 있는 메서드를 "생명주기 훅(Life Cycle Hooks)"이라고 합니다. 이 글에서는 Vue.js의 생명주기를 단계별로 설명하고, 각 생명주기 훅의 역할과 사용 예제를 살펴보겠습니다.

Vue.js 생명주기란?

Vue.js의 생명주기는 크게 네 가지 주요 단계로 나눌 수 있습니다:

1. 생성(Create): 컴포넌트 인스턴스가 생성되고 초기화되는 단계.
2. 마운트(Mount): 컴포넌트가 DOM에 삽입되는 단계.
3. 업데이트(Update): 컴포넌트의 데이터가 변경되어 DOM이 다시 렌더링되는 단계.
4. 제거(Destroy): 컴포넌트가 DOM에서 제거되고 인스턴스가 소멸되는 단계.

 

생명주기표

 

이러한 각 단계에서 호출되는 생명주기 훅을 통해 개발자는 특정 시점에 원하는 로직을 실행할 수 있습니다.

 

생명주기 단계와 훅

1. 생성(Create) 단계
   • beforeCreate: 컴포넌트가 초기화되기 전에 호출됩니다.
     • 컴포넌트가 생성되기 전에 동작하는 기능이기 때문에 data, methods에 선언한 데이터, 함수에 접근 불가
     • 컴포지션 API에서는 사용하지 않음 (setup 대체)
   • created: 컴포넌트가 초기화된 후에 호출됩니다.
     • 이 단계에서는 데이터 초기화, API 호출 등을 수행할 수 있습니다.

export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  }
};

2. 마운트(Mount) 단계
   • beforeMount: 컴포넌트의 DOM이 생성되기 전에 호출됩니다.
   • mounted: 컴포넌트의 DOM이 생성된 후에 호출됩니다.
     • 이 단계에서 DOM과 상호작용할 수 있으며, 외부 라이브러리 초기화를 수행할 수 있습니다.

export default {
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  }
};

3. 업데이트(Update) 단계
   • beforeUpdate: 데이터가 변경되어 DOM이 다시 렌더링되기 전에 호출됩니다.
   • updated: 데이터가 변경되어 DOM이 다시 렌더링된 후에 호출됩니다.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  }
};

4. 제거(Destroy) 단계
   • beforeUnmount: 컴포넌트가 제거되기 전에 호출됩니다.
   • unmounted: 컴포넌트가 제거된 후에 호출됩니다.

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};

생명주기 훅 사용 예제

아래는 모든 생명주기 훅을 사용하여 컴포넌트의 각 단계에서 로그를 출력하는 예제입니다.

<template>
  <div>
    <p>Vue.js 생명주기 훅 예제</p>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

결론

Vue.js의 생명주기는 컴포넌트의 생성, DOM 삽입, 상태 업데이트, 소멸의 각 단계를 관리할 수 있도록 합니다. 각 생명주기 훅을 적절히 사용하면 컴포넌트의 초기화, 업데이트, 정리 작업을 효과적으로 수행할 수 있습니다. Vue.js 생명주기를 이해하고 활용하면 더욱 강력하고 유연한 애플리케이션을 개발할 수 있습니다.