[Vue3 디렉티브 완전 정복 시리즈]5 사용자 정의 디렉티브의 생명주기(Hooks)

사용자 정의 디렉티브의 생명주기(Hooks) 쉽게 이해하기

생명주기(Hooks)란?

Vue에서 컴포넌트는 만들어지고 → 화면에 나오고 → 업데이트되고 → 사라지는 과정을 거칩니다.
디렉티브도 마찬가지로 이 과정에 따라 자동으로 실행되는 함수들이 있는데, 이것을 **라이프사이클 훅(Hook)**이라고 부릅니다.

즉, 디렉티브는 아래 같은 상황에 맞춰 자동 실행됩니다:

• 엘리먼트가 화면에 나타났을 때
• 값이 바뀌었을 때
• 엘리먼트가 사라질 때

대표적인 디렉티브 훅 4가지

훅 이름 실행 시점 설명

created	디렉티브가 처음 연결될 때 (아직 DOM에 없음)
beforeMount	화면에 나타나기 직전
mounted	화면에 나타난 직후 (DOM 사용 가능)
updated	값이 변경되어 화면이 다시 그려질 때
unmounted	화면에서 사라질 때 (정리할 때 사용)

실습 예시: 모든 훅을 콘솔에 출력해보기

// src/directives/log.js
export default {
  created(el, binding) {
    console.log('created', binding.value)
  },
  beforeMount(el) {
    console.log('beforeMount')
  },
  mounted(el) {
    console.log('mounted')
  },
  updated(el, binding) {
    console.log('updated', binding.value)
  },
  unmounted(el) {
    console.log('unmounted')
  }
}

사용 예

<!-- App.vue -->
<template>
  <input v-log="inputText" v-model="inputText" />
</template>

<script setup>
import { ref } from 'vue'
const inputText = ref('기본값')
</script>

• 화면에 뜨면 created, mounted 로그 출력
• 입력을 바꾸면 updated 로그 출력
• 페이지에서 사라지면 unmounted 출력
  
  

각 훅의 쓰임새 쉽게 정리

• created: 디렉티브 준비 시작 (DOM 접근 불가능)
• mounted: DOM 조작 가능 (예: el.focus())
• updated: 값이 바뀔 때마다 실행 (애니메이션, 스타일 변경)
• unmounted: 정리할 때 (이벤트 제거 등)
  
  

단계 요약 (한눈에 정리)

• 디렉티브에도 생명주기 훅(Hook)이 있으며 자동 실행됨
• 주로 mounted, updated, unmounted 세 가지를 가장 많이 씀
• 훅을 활용하면 DOM 제어, 이벤트 연결, 정리 작업 등을 안전하게 처리 가능
• 콘솔 로그로 흐름을 직접 보며 익히는 것이 중요함

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.