[Vue3 디렉티브 완전 정복 시리즈]3 사용자 정의 디렉티브란 무엇인가요?

사용자 정의 디렉티브란?

지금까지는 Vue가 기본으로 제공하는 v-if, v-model 같은 디렉티브를 배웠습니다.
그런데 개발을 하다 보면 **"직접 나만의 디렉티브를 만들고 싶다"**는 경우가 생깁니다.

예를 들어, 어떤 요소가 화면에 보일 때 자동으로 포커스를 주고 싶을 때, 아래처럼 쓸 수 있다면 좋겠죠?

<input v-focus />

이렇게 v-focus는 Vue가 기본으로 제공하지 않기 때문에 내가 직접 만들어야 합니다.
이걸 사용자 정의 디렉티브(Custom Directive) 라고 부릅니다.

 

사용자 정의 디렉티브는 언제 쓰나요?

• 요소에 커스텀한 동작을 적용하고 싶을 때 (예: 자동 포커스, 자동 스크롤)
• Vue 컴포넌트로 만들기에는 너무 간단한 기능일 때
• 반복적으로 사용하는 동작을 공통화하고 싶을 때

예시: 포커스를 자동으로 주는 v-focus 만들기

<!-- components/VFocus.js -->
export default {
  mounted(el) {
    el.focus()
  }
}

• el: 이 디렉티브가 붙은 HTML 요소를 가리킴
• mounted: 요소가 화면에 나타났을 때 실행됨
  
  

이 디렉티브를 전역으로 등록하기

// main.js 또는 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import vFocus from './components/VFocus.js'

const app = createApp(App)

app.directive('focus', vFocus)

app.mount('#app')

이제 모든 컴포넌트에서 v-focus를 사용할 수 있습니다.

실제 사용 예제

<!-- App.vue -->
<template>
  <input v-focus placeholder="화면에 뜨면 자동으로 커서가 들어와요" />
</template>

이제 이 입력창은 페이지가 열리자마자 자동으로 커서가 들어옵니다.

단계 요약 (한눈에 정리)

• 사용자 정의 디렉티브는 v-my-directive처럼 직접 만드는 디렉티브입니다
• 간단한 요소 동작(포커스, 자동 스크롤 등)에 적합합니다
• .directive()를 사용해 전역 등록할 수 있습니다
• 디렉티브 객체 안에는 mounted, updated 등의 훅이 있습니다
  
  

💬 댓글

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