Vue 지시문: 사용자 지정 지시문과 그 사용법

 

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 vfocus>
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 vscroll=“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 vlazyload=“‘path/to/image.png'”></div>
cs

 


 

Vue.js의 사용자 지정 지시문은 애플리케이션에 특수한 동작이나 인터랙션을 쉽게 추가할 수 있는 강력한 방법을 제공합니다. 적절히 사용한다면, 사용자 경험을 향상시키고 코드의 재사용성 및 유지보수성을 높일 수 있습니다. Vue 개발자라면 사용자 지정 지시문을 자신의 도구 상자에 추가하는 것을 고려해 보아야 할 것입니다.

 

v4

 

. 웹 개발 최신 트렌드, 반응형 웹 디자인 기법, 자바스크립트 프레임워크 비교, Vue.js 입문 가이드, 프론트엔드 성능 최적화

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다