Vue.js 라이프 사이클: 컴포넌트의 탄생부터 소멸까지

(Vue.js, 라이프 사이클, 컴포넌트, 생명 주기, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, $nextTick)

Vue.js는 컴포넌트 기반의 프레임워크로, 각 컴포넌트는 생성, 마운트, 업데이트, 소멸 등 다양한 단계를 거치며 라이프 사이클을 가집니다. 이 라이프 사이클을 이해하는 것은 Vue.js 개발에서 매우 중요하며, 컴포넌트의 특정 시점에 원하는 작업을 수행할 수 있도록 도와줍니다. 본 글에서는 Vue.js의 라이프 사이클 단계별 특징과 예제를 통해 자세히 알아보고, 이를 활용하여 더욱 효율적인 Vue.js 개발을 할 수 있도록 돕겠습니다.

Vue.js 라이프 사이클이란?

Vue.js 컴포넌트는 생성되어 DOM에 추가되고, 데이터가 변경되면 다시 렌더링되며, 최종적으로는 DOM에서 제거되는 과정을 거칩니다. 이러한 일련의 과정을 컴포넌트의 라이프 사이클이라고 합니다. Vue.js는 컴포넌트의 각 단계에서 호출되는 특별한 함수인 라이프 사이클 훅을 제공하여, 개발자가 원하는 시점에 특정 작업을 수행할 수 있도록 합니다.

라이프 사이클 단계별 특징 및 예제

1. 생성 단계: 컴포넌트 인스턴스가 생성되고 초기화되는 단계입니다.
   • beforeCreate: 컴포넌트가 생성되기 전에 호출됩니다. 데이터나 메서드에 접근할 수 없습니다.
   • created: 컴포넌트가 생성된 후에 호출됩니다. 데이터와 메서드에 접근할 수 있으며, 서버에서 데이터를 가져오는 등의 초기화 작업을 수행하기 좋은 시점입니다.
2. 마운트 단계: 컴포넌트가 DOM에 처음으로 렌더링되는 단계입니다.
   • beforeMount: 컴포넌트가 DOM에 마운트되기 전에 호출됩니다.
   • mounted: 컴포넌트가 DOM에 마운트된 후에 호출됩니다. DOM 조작이나 서드파티 라이브러리 초기화 등을 수행하기 좋은 시점입니다.
3. 업데이트 단계: 컴포넌트의 데이터가 변경되면 DOM이 업데이트되는 단계입니다.
   • beforeUpdate: 데이터가 변경되기 전에 호출됩니다.
   • updated: 데이터가 변경되고 DOM이 업데이트된 후에 호출됩니다.
4. 소멸 단계: 컴포넌트가 DOM에서 제거되는 단계입니다.
   • beforeDestroy: 컴포넌트가 파괴되기 전에 호출됩니다. 타이머를 해제하거나 이벤트 리스너를 제거하는 등의 정리 작업을 수행하기 좋은 시점입니다.
   • destroyed: 컴포넌트가 완전히 파괴된 후에 호출됩니다.

예제:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">메시지 변경</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    console.log('컴포넌트가 생성되었습니다.');
  },
  mounted() {
    console.log('컴포넌트가 DOM에 마운트되었습니다.');
  },
  methods: {
    changeMessage() {
      this.message = 'Vue.js는 짱짱!';
    }
  }
}
</script>

 

$nextTick

$nextTick 메서드는 DOM 업데이트가 완료된 후에 실행되는 콜백 함수를 등록하는 데 사용됩니다. DOM을 조작한 후에 DOM의 변경 사항을 반영하여 다른 작업을 수행해야 할 때 유용하게 사용됩니다.

라이프 사이클 활용하기

• 데이터 가져오기: created 또는 mounted에서 서버에서 데이터를 가져올 수 있습니다.
• DOM 조작: mounted 또는 updated에서 DOM을 조작할 수 있습니다.
• 타이머 설정: created에서 타이머를 설정하고, beforeDestroy에서 타이머를 해제할 수 있습니다.
• 이벤트 리스너 등록: mounted에서 이벤트 리스너를 등록하고, beforeDestroy에서 이벤트 리스너를 제거할 수 있습니다.

결론

Vue.js의 라이프 사이클을 이해하고 활용하면 컴포넌트의 상태를 효과적으로 관리하고, 복잡한 애플리케이션 개발에도 유연하게 대처할 수 있습니다. 각 라이프 사이클 단계의 특징과 예제를 숙지하여 Vue.js 개발 실력을 향상시키시기 바랍니다.