[Vue3 디렉티브 완전 정복 시리즈]4 사용자 정의 디렉티브 정리/재사용

사용자 정의 디렉티브를 정리하고 재사용하기 (컴포지션 방식)

문제 상황부터 이해하기

이전 시간에 만든 v-focus 디렉티브는 main.js에 하나씩 등록했죠.
그런데 나중에 v-focus, v-scroll, v-copy 등 여러 개의 디렉티브를 만들다 보면 main.js가 지저분해지고 관리하기 어려워집니다.

그래서 이번 시간에는 여러 디렉티브를 한 곳에 정리해서 자동으로 등록하는 방법을 알려드립니다.

1단계: 디렉티브 파일을 폴더에 정리하기

먼저 src/directives 폴더를 만들고, 각각의 디렉티브를 파일로 나눕니다.

src/directives/focus.js

export default {
  mounted(el) {
    el.focus()
  }
}

src/directives/copy.js

export default {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      navigator.clipboard.writeText(binding.value)
      alert('복사되었습니다!')
    })
  }
}

2단계: 디렉티브를 자동으로 등록하는 파일 만들기

src/directives/index.js

// 자동 등록용 디렉티브 모음
import focus from './focus'
import copy from './copy'

export default {
  install(app) {
    app.directive('focus', focus)
    app.directive('copy', copy)
  }
}

• install()은 Vue에서 플러그인처럼 묶어서 등록할 때 쓰는 방식입니다.
• 이 파일 하나로 모든 디렉티브를 등록할 수 있습니다.
  
  

3단계: main.js에서 설치하기

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import directives from './directives'

const app = createApp(App)

app.use(directives) // 디렉티브 한 번에 등록

app.mount('#app')

4단계: 실제 사용 예시

<!-- App.vue -->
<template>
  <div>
    <input v-focus placeholder="자동 포커스" />
    <button v-copy="'복사할 내용입니다.'">클릭하면 복사됨</button>
  </div>
</template>

단계 요약 (한눈에 정리)

• 디렉티브 파일들을 src/directives 폴더에 나누어 저장
• index.js에서 하나로 묶고, install() 함수로 등록
• main.js에서 app.use()로 한 줄에 모든 디렉티브 적용
• 구조화하면 유지보수가 쉬워지고 협업 시에도 명확함
  
  

💬 댓글

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