사용자 정의 디렉티브
mounted 및 updated와 같은 수명 주기 훅으로 전역 및 로컬 디렉티브를 등록하여, 컴포넌트 외부에서 DOM 조작 로직을 캡슐화합니다.
사용자 정의 디렉티브은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
지시문이란 무엇인가요
지시문은 v- 접두사를 통해 요소에 연결하는 재사용 가능한 DOM 조작 로직입니다. 기본 제공 예로는 v-if, v-for, v-model, v-show가 있습니다. 사용자 지정 지시문을 사용하면 직접 만들 수도 있습니다.
사용 사례: 자동 포커스
지시문은 래퍼 컴포넌트를 만들기에는 작지만 재사용할 가치가 있는 DOM 조작을 캡슐화할 수 있습니다.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>지역 지시문 등록
<script setup>에서는 v 접두사를 붙여 지시문을 선언하면 Vue가 해당 지시문을 지역적으로 자동 등록합니다.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>전역 지시문 등록
app.directive(name, definition)을 사용하면 지시문을 어디서나 사용할 수 있습니다.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');지시문 생명 주기 훅
지시문에는 컴포넌트 생명 주기를 반영하는 훅이 있습니다. 생성 시, 마운트 전, 마운트 후, 업데이트 전, 업데이트 후, 마운트 해제 전, 마운트 해제 후에 실행됩니다.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};binding 객체
훅은 다음 속성을 가진 바인딩 객체를 받습니다. value, oldValue, arg, modifiers, instance입니다.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }실제 예: v-click-outside
자주 사용하는 지시문으로, 사용자가 요소 바깥을 클릭하면 처리기를 호출합니다.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>실제 예: v-tooltip
지시문을 통해 Tippy/Popper 툴팁을 연결하면 템플릿을 깔끔하게 유지할 수 있습니다.
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce: 입력 이벤트 조절
사용자 지정 지시문으로 입력의 @input 처리기 주위에 디바운스를 연결하십시오.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">지시문, 컴포넌트, 컴포저블 비교
컴포저블은 상태를 가진 로직(데이터, ref)입니다. 컴포넌트는 자체 템플릿을 가진 재사용 가능한 UI 구조입니다. 지시문은 기존 요소에 적용하는 순수한 DOM 동작입니다. 템플릿이나 마크업이 필요하지 않을 때 지시문을 선택하십시오.
성능 고려 사항
지시문은 모든 업데이트에서 실행됩니다. 지시문을 가볍게 유지하십시오. 비용이 큰 작업은 binding.value !== binding.oldValue를 기준으로 실행하여 불필요한 작업을 건너뛰십시오.
빠른 확인
동작을 추가할 때 Vue 지시문을 사용하는 것과 Vue 컴포넌트를 사용하는 것의 차이는 무엇인가요?
복습: 사용자 지정 지시문
v 접두사를 사용하는 재사용 가능한 DOM 로직입니다. 지역적으로 등록하거나(script setup의 vName 상수) 전역적으로 등록할 수 있습니다(app.directive). 생명 주기 훅은 마운트 후, 업데이트 후, 마운트 해제 후입니다. binding은 value, oldValue, arg, modifiers를 제공합니다. 순수한 DOM 동작(포커스, 외부 클릭, 툴팁, 디바운스)에 사용하십시오. 컴포넌트는 마크업에, 컴포저블은 상태를 가진 로직에, 지시문은 DOM 확장에 사용합니다.
자주 묻는 질문
“사용자 정의 디렉티브” 강의는 무료인가요?
네 — “사용자 정의 디렉티브” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“사용자 정의 디렉티브”에서 뭘 배우나요?
mounted 및 updated와 같은 수명 주기 훅으로 전역 및 로컬 디렉티브를 등록하여, 컴포넌트 외부에서 DOM 조작 로직을 캡슐화합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“사용자 정의 디렉티브” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.