Vue에서 커스텀 디렉티브 만들기 – 직접 만든 v-detect 예시로 이해해보자

Vue에서 커스텀 디렉티브 만들기 — v-detect 예제

Vue에서는 v-if, v-for처럼 v-로 시작하는 디렉티브를 통해 HTML 요소에 특정 동작을 지정할 수 있다.
그리고 기본 디렉티브 외에도, 직접 커스텀 디렉티브를 만들어서 사용할 수 있다.

이번에는 사용자가 input에 특정 단어를 입력했을 때, 그 단어를 치환해주는 간단한 디렉티브를 만들어보자.

1. main.vue — 커스텀 디렉티브 사용

<template>
  <div class="container">
    <input type="text" v-detect v-model="content" />
    {{ content }}
  </div>
</template>

<script>
import { detect } from "./directives/common";

export default {
  name: "HelloWorld",
  data() {
    return {
      content: "",
    };
  },
  directives: {
    detect,
  },
};
</script>

v-detect라는 커스텀 디렉티브를 input 요소에 적용했다.
detect 디렉티브 객체를 외부 파일에서 import해서 directives 옵션에 등록했다.

2. common.js — 디렉티브 정의

export const detect = {
  mounted: (el) => {
    el.addEventListener("keydown", () => {
      let changeText = el.value;

      const fruits = [
        { name: "banana", icon: "[banana]" },
        { name: "lemon", icon: "[lemon]" },
        { name: "grape", icon: "[grape]" },
        { name: "apple", icon: "[apple]" },
        { name: "pizza", icon: "[pizza]" },
        { name: "^^", icon: "[smile]" },
      ];

      fruits.forEach((item) => {
        if (changeText.includes(item.name)) {
          changeText = changeText.replace(item.name, item.icon);
        }
      });

      el.value = changeText;
    });
  },
};

디렉티브는 mounted 훅에서 input 요소에 keydown 이벤트를 등록한다.
입력값에 특정 단어가 포함되어 있으면, 미리 지정된 문자열로 치환한다.

3. 동작 방식

• 사용자가 input에 값을 입력한다.
• 입력 중 특정 단어가 감지되면, 사전에 정의된 문자열로 자동 치환된다.
• 치환된 값은 바로 화면에 반영된다.

4. 정리

• 커스텀 디렉티브는 반복되는 동작을 캡슐화할 수 있어 코드 재사용성이 높다.
• DOM 조작을 Vue 방식으로 구조화할 수 있다.
• 입력 필터링, 외부 라이브러리 연동, 마우스 이벤트 처리 등 다양한 응용이 가능하다.

이 디렉티브는 다른 키워드나 상황에도 쉽게 응용할 수 있다.
마우스 hover 시 스타일 변경, 특정 입력 자동 변환 등 반복되는 UI 동작을 효과적으로 처리하는 데 유용하다.