Vue.js는 현대 웹 개발을 위한 강력하고 유연한 프레임워크입니다. 그 중에서도 Vue의 지시문(Directives)은 DOM 요소의 행동을 지정하는 데 중요한 역할을 합니다. 이 글에서는 Vue의 사용자 지정 지시문을 만들고 활용하는 방법을 탐구해보겠습니다.
사용자 지정 지시문이란?
Vue에서는 v-model, v-if, v-for 같은 내장 지시문을 제공합니다. 이와 함께, Vue는 개발자가 특정 DOM 요소에 대한 사용자 지정 동작을 정의할 수 있게 하는 사용자 지정 지시문도 지원합니다. 사용자 지정 지시문은 재사용 가능하며, 애플리케이션 전역이나 특정 컴포넌트에 로컬로 등록할 수 있습니다.
사용자 지정 지시문의 기본 구조
Vue의 사용자 지정 지시문은 여러 훅을 제공합니다: bind, inserted, update, componentUpdated, unbind. 각 훅은 지시문의 생명주기 동안 특정 시점에 호출됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
Vue.directive(‘my-directive’, {
bind(el, binding, vnode) {
// 요소가 처음으로 DOM에 바인딩될 때 호출됩니다.
},
inserted(el, binding, vnode) {
// 요소가 부모 노드에 삽입됐을 때 호출됩니다.
},
update(el, binding, vnode, oldVnode) {
// 요소 및 컴포넌트가 업데이트됐을 때 호출됩니다.
}
// componentUpdated, unbind 훅 생략
});
|
cs |
샘플: 포커스 지시문
사용자가 페이지를 로드했을 때 특정 입력 필드에 자동으로 포커스를 맞추는 간단한 지시문입니다.
|
1
2
3
4
5
6
|
// 포커스 지시문 등록
Vue.directive(‘focus’, {
inserted: function (el) {
el.focus();
}
});
|
cs |
사용법:
|
1
|
<input v–focus>
|
cs |
샘플: 스크롤 지시문
스크롤 이벤트를 감지하여 특정 조건에 도달했을 때 액션을 취하는 지시문입니다.
|
1
2
3
4
5
6
7
8
9
10
|
Vue.directive(‘scroll’, {
inserted: function (el, binding) {
let f = function (evt) {
if (binding.value(evt, el)) {
window.removeEventListener(‘scroll’, f);
}
};
window.addEventListener(‘scroll’, f);
}
});
|
cs |
사용법:
|
1
|
<div v–scroll=“handleScroll”>Scroll me</div>
|
cs |
샘플: 이미지 지연 로딩
이미지 태그에 사용되어, 뷰포트에 들어왔을 때 이미지를 로딩하는 지시문입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
Vue.directive(‘lazy-load’, {
inserted: function (el, binding) {
function loadImage() {
const imageElement = Array.from(el.children).find(
(el) => el.nodeName === “IMG”);
if (imageElement) {
imageElement.addEventListener(‘load’, () => {
setTimeout(() => el.classList.add(‘loaded’), 100);
});
imageElement.addEventListener(‘error’, () => console.log(‘error’));
imageElement.src = binding.value;
}
}
function handleScroll() {
const windowHeight = window.innerHeight;
const elementTop = el.getBoundingClientRect().top;
if (elementTop <= windowHeight) {
loadImage();
window.removeEventListener(‘scroll’, handleScroll);
}
}
window.addEventListener(‘scroll’, handleScroll);
handleScroll();
}
});
|
cs |
사용법:
|
1
|
<div v–lazy–load=“‘path/to/image.png'”></div>
|
cs |
Vue.js의 사용자 지정 지시문은 애플리케이션에 특수한 동작이나 인터랙션을 쉽게 추가할 수 있는 강력한 방법을 제공합니다. 적절히 사용한다면, 사용자 경험을 향상시키고 코드의 재사용성 및 유지보수성을 높일 수 있습니다. Vue 개발자라면 사용자 지정 지시문을 자신의 도구 상자에 추가하는 것을 고려해 보아야 할 것입니다.
. 웹 개발 최신 트렌드, 반응형 웹 디자인 기법, 자바스크립트 프레임워크 비교, Vue.js 입문 가이드, 프론트엔드 성능 최적화