[Vue3 디렉티브 완전 정복 시리즈]6 실무에서 유용한 사용자 정의 디렉티브 예제 3가지

실무에서 유용한 사용자 정의 디렉티브 예제 3가지

이번 회차에서는 직접 써먹을 수 있는 실무형 사용자 정의 디렉티브를 3가지 소개합니다.
각 예제는 실제 프로젝트에서 자주 등장하는 요구사항입니다.

예제 1: v-auto-focus — 자동 포커스

기능 설명

페이지가 열리면 자동으로 입력창에 커서를 넣어주는 디렉티브입니다.

구현

// directives/autoFocus.js
export default {
  mounted(el) {
    el.focus()
  }
}

사용 예

<input v-auto-focus placeholder="자동 포커스 입력창" />

로그인 폼, 검색창 등에 자주 사용됩니다.

예제 2: v-copy — 클릭 시 텍스트 클립보드 복사

기능 설명

버튼이나 텍스트를 클릭하면 원하는 문자열을 클립보드에 복사합니다.

구현

// directives/copy.js
export default {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      navigator.clipboard.writeText(binding.value)
      alert('복사되었습니다: ' + binding.value)
    })
  },
  unmounted(el) {
    el.removeEventListener('click', el.__copyHandler)
  }
}

사용 예

링크 복사

초대코드, URL, 추천인 코드 등 복사할 일이 많은 UI에 적합합니다.

예제 3: v-debounce — 입력 이벤트 디바운싱

기능 설명

입력 이벤트가 너무 자주 실행되지 않도록 시간 간격을 두고 실행합니다.

구현

// directives/debounce.js
export default {
  mounted(el, binding) {
    let timeout
    el.addEventListener('input', (e) => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        binding.value(e)
      }, 500) // 0.5초 후 실행
    })
  }
}

사용 예

<input v-debounce="handleDebouncedInput" />

<script setup>
function handleDebouncedInput(e) {
  console.log('사용자 입력:', e.target.value)
}
</script>

실시간 검색, 입력 감지 등에 사용됩니다. 너무 자주 API 호출을 막을 수 있습니다.

디렉티브 등록하기

src/directives/index.js에 이렇게 추가해 등록할 수 있습니다.

import autoFocus from './autoFocus'
import copy from './copy'
import debounce from './debounce'

export default {
  install(app) {
    app.directive('auto-focus', autoFocus)
    app.directive('copy', copy)
    app.directive('debounce', debounce)
  }
}

단계 요약 (한눈에 정리)

• v-auto-focus: 로그인, 폼 입력창에 자동 포커스
• v-copy: 버튼 클릭 시 텍스트 복사 기능 구현
• v-debounce: 입력 이벤트를 제한해 불필요한 실행 방지
• 실무에서 자주 등장하는 요구사항을 디렉티브로 공통 처리 가능
• 유지보수가 쉬워지고, 코드 재사용성이 높아짐
  
  

💬 댓글

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