Vue.js 라이프사이클 후크

Vue.js 라이프사이클 후크는 Vue 구성 요소의 라이프사이클의 특정 단계에서 코드를 실행할 수 있는 메서드 세트입니다. 생성에서 파괴까지 구성 요소의 존재의 다양한 지점을 탭할 수 있는 방법을 제공합니다. 이러한 후크는 데이터 초기화, 이벤트 리스너 설정, 리소스 정리와 같은 작업을 수행하는 데 필수적입니다.

Vue 컴포넌트의 수명 주기

Vue 구성 요소의 수명 주기는 여러 단계로 나눌 수 있습니다. 각 단계는 코드를 실행하는 데 사용할 수 있는 특정 수명 주기 후크와 연관됩니다. 다음은 Vue 구성 요소의 수명 주기의 주요 단계입니다.

생성: 구성 요소가 초기화되고 있습니다.
마운팅: 구성 요소가 DOM에 추가되고 있습니다.
업데이트: 구성 요소의 반응형 데이터가 변경되고 있습니다.
파괴: 구성 요소가 DOM에서 제거되고 있습니다.

주요 라이프사이클 후크

Vue.js는 컴포넌트에서 사용할 수 있는 여러 라이프사이클 후크를 제공합니다. 각 후크는 라이프사이클의 특정 단계에 해당합니다. 가장 일반적으로 사용되는 후크는 다음과 같습니다.

created: 컴포넌트 인스턴스가 생성된 후 호출됩니다. 데이터를 가져오거나 컴포넌트 상태를 초기화하기에 좋은 위치입니다.
mounted: 컴포넌트가 DOM에 마운트된 후에 호출됩니다. 여기서 DOM 조작을 수행하거나 비동기 작업을 시작할 수 있습니다.
업데이트: 컴포넌트의 반응형 데이터가 변경되고 DOM이 업데이트된 후에 호출됩니다. 데이터 변경에 반응하는 데 유용합니다.
파괴됨: 구성 요소가 파괴되기 전에 호출됩니다. 이 후크를 사용하여 이벤트 리스너나 타이머와 같은 리소스를 정리합니다.

라이프사이클 후크의 예

후크 생성됨

created 후크는 구성 요소 인스턴스가 생성되고 마운트되기 전에 작업을 수행하는 데 사용됩니다. 다음은 created 후크를 사용하여 데이터를 가져오는 예입니다.

<template>
  <div>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    }
  }
};
</script>

마운트 후크

mounted 후크는 구성 요소가 DOM에 추가된 후에 호출됩니다. DOM 조작을 수행하거나 구성 요소가 DOM에 있어야 하는 비동기 작업을 시작하는 데 이상적입니다. 다음은 예입니다.

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.innerHTML = 'Component has been mounted!';
  }
};
</script>

업데이트된 Hook

updated 후크는 구성 요소의 반응형 데이터가 변경되고 DOM이 업데이트된 후에 호출됩니다. 데이터 변경에 반응하는 데 유용합니다. 다음은 예입니다.

<template>
  <div>
    <input v-model="text" placeholder="Type something"/>
    <p>Updated Text: {{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  updated() {
    console.log('Component updated with text:', this.text);
  }
};
</script>

파괴된 후크

destroyed 후크는 구성 요소가 파괴되기 전에 호출됩니다. 이 후크를 사용하여 이벤트 리스너 제거 또는 타이머 중지와 같은 정리를 수행합니다. 다음은 예입니다.

<template>
  <div>Check the console when this component is destroyed</div>
</template>

<script>
export default {
  destroyed() {
    console.log('Component is being destroyed');
  }
};
</script>

결론

Vue.js 라이프사이클 후크는 구성 요소 라이프사이클의 다양한 단계를 관리하는 데 필수적입니다. 이러한 후크를 이해하고 사용하면 데이터를 효과적으로 초기화하고, DOM을 조작하고, 업데이트를 처리하고, 리소스를 정리할 수 있습니다. Vue.js 구성 요소에 라이프사이클 후크를 통합하여 견고하고 반응성이 뛰어난 애플리케이션을 만드세요.

라이프사이클 vue 생성 마운트 업데이트 파괴 후크 컴포넌트 데이터 dom 메서드 이벤트 정리 초기화