📌 커스텀 디렉티브 만들기 (v-focus, v-mask 등)

📌 커스텀 디렉티브 만들기 (v-focus, v-mask 등)

Vue 실무 구성 요소와 유틸 > 커스텀 디렉티브 만들기

• 1. 디렉티브란?
• 2. v-focus 예제 – 포커스 자동 지정
• 3. v-mask 예제 – 입력 마스킹
• 4. 디렉티브 라이프사이클 훅
• 5. 전역 등록 vs 지역 등록
• 6. 실전 팁 & 주의사항
• 🔚 마무리 & 다음 글 안내

---

1. 디렉티브란?

Vue 디렉티브는 HTML 요소에 v- 접두사를 붙여 특정 DOM 동작을 지시하는 특별한 속성입니다. 기본적으로 v-if, v-for, v-model, v-bind 등이 존재하지만, 개발자는 직접 커스텀 디렉티브를 정의할 수도 있습니다.

---

2. v-focus – 포커스 자동 지정

입력창 진입 시 자동으로 focus가 가도록 하는 디렉티브입니다.

📌 사용 예시

// main.js 또는 main.ts
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

<input v-focus />

결과: 화면에 렌더링된 즉시 해당 input에 자동으로 포커스가 이동합니다.

---

3. v-mask – 숫자 입력 마스킹

특정 형식(전화번호, 숫자 등)을 자동으로 포맷팅해주는 디렉티브입니다.

// directives/v-mask.js
export default {
  mounted(el, binding) {
    el.addEventListener('input', () => {
      let val = el.value.replace(/\D/g, '');
      if (binding.value === 'phone') {
        val = val.replace(/(\d{3})(\d{3,4})(\d{4})/, '$1-$2-$3');
      }
      el.value = val;
    });
  }
}

<input v-mask="'phone'" />

팁: binding.value로 전달된 포맷 타입을 구분할 수 있어 다양한 마스킹 적용이 가능합니다.

---

4. 디렉티브 라이프사이클 훅

훅	호출 시점	설명
created	DOM 생성 전	디렉티브가 처음 바인딩될 때 호출
beforeMount	DOM 삽입 직전	요소가 DOM에 삽입되기 전에 호출
mounted	DOM 삽입 후	요소가 DOM에 추가된 후 호출 (자주 사용)
updated	컴포넌트 업데이트 후	속성 변경 시 호출됨
unmounted	DOM 제거 시	정리용. 이벤트 제거 등 활용

---

5. 전역 등록 vs 지역 등록

📍 전역 등록

// main.js
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

📍 지역 등록

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};

전역 등록: 프로젝트 전체에서 공통으로 사용할 경우

지역 등록: 특정 컴포넌트에서만 사용할 경우

---

6. 실전 팁 & 주의사항

• 디렉티브는 DOM 직접 조작이므로 Vue의 반응성 외부에 있음 (주의!)
• 렌더링 타이밍 때문에 mounted 훅에서 사용하는 게 가장 안전
• v-model과 충돌 주의: 동일 input에 v-model과 디렉티브가 동시에 있으면 예상치 못한 동작 발생 가능
• 정리 작업은 unmounted 훅에서 꼭 처리 (event 제거 등)

---

🔚 마무리 & 다음 글 안내

이제 v-focus, v-mask 같은 커스텀 디렉티브를 직접 만들고 활용할 수 있게 되었습니다.
다음 글에서는 글로벌 컴포넌트 등록 전략을 통해 공통 UI 요소를 효율적으로 관리하는 방법을 소개합니다.

👉 다음 글: 글로벌 컴포넌트 등록 전략