웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS를 구성하는 컴포넌트, 필터, 스코프 등의 중요한 요소들 중 하나로 디렉티브(Directive)가 있습니다.내장된 디렉티브와는 별도이므로 커스텀 디렉티브라고 많이 부릅니다. 아래서는 VueJS에서 디렉티브는 무엇이고 어떤 역할을 할 수 있는지 알아보겠습니다.
# VueJS에서 디렉티브, Directive
디렉티브는 템플릿에 사용되는 태그에 Html 프로퍼티(property)처럼 아래와 같이 사용됩니다.<span v-addLink="webisfree.com"></span>
위 코드를 보시면 span 태그에addLink라는 디렉티브가 적용되어 있습니다. 이처럼 디렉티브를 사용할때는 이름 앞에 v-를 추가하면 디렉티브로서 사용할 수 있습니다. 그렇다면 직접 만든 커스텀 디렉티브로 무엇을 할 수 있을까요?
! VueJS 커스텀 디렉티브로 할 수 있는 것
직접 만든 커스텀 디렉티브가 사용된 경우 해당 코드의 엘리먼트, 사용된 인자값 등등을 전달 받을 수 있습니다. 그렇기 때문에 특정 템플릿 코드에 어떤 기능을 추가할 경우 매우 쉽게 적용하는 것이 가능합니다. 여기서 디렉티브의 장점을 알아보면...원하는 컴포넌트 어디서든 쉽게 적용다른 프론트엔진인 angular나 react 역시 디렉티브가 존재합니다. 디렉티브가 많이 쓰이는 큰 이유는 어떤 컴포넌트나 대상이든 사용할 수 있고 그 방법이 매우 쉽다는 점입니다. 예를들어 템플릿 안에 존재하는 100개의 태그를 링크가 가능하도록 만들고 싶다면? 간단하게 해당 디렉티브만 추가하면 되죠... 그럼 디렉티브를 어떻게 쓰는지 알아보겠습니다.
# VueJS 커스텀 디렉티브 예제, 만들기
먼저 디렉티브는 App을 설정하는 곳에 만들거나 아니면 컴포넌트에서만 사용하도록 설정할 수도 있습니다. 여기서는 모든 곳에서 사용할 수 있도록 App을 설정하는 곳에 사용하는 방법을 만들어봅니다. 사실 디렉티브를 하나의 컴포넌트에서만 사용하려면 컴포넌트의 메소드를 등록하는 것과 큰 차이는 없기 때문입니다.먼저 코드를 작성해보겠습니다. Vue에 다음과 같이 directive를 사용하여 커스텀 디렉티브를 선언합니다. 아래는 addClass라는 이름의 디렉티브를 만들어보겠습니다. 해당 디렉티브가 적용될 경우 엘리먼트에는 자동으로 넘겨준 파라미터 값으로 클래스명이 자동으로 추가되는 예제입니다.
addClass : 자동으로 active 클래스를 추가함
이제 소스코드를 작성해보겠습니다. 먼저 디렉티브를 선언하고 내부에 소스 코드를 작성합니다.
Vue.directive('addClass', {
inserted: function (el, binding) {
el.classList.add(binding);
}
});
inserted: function (el, binding) {
el.classList.add(binding);
}
});
이제 VueJS템플릿에 아래와 같이 디렉티브를 지정해봅니다.
<button v-addClass="active">Click</button>
코드를 실행하면 자동으로 active라는 클래스가 추가되는 간단한 예제입니다. 앞에도 언급했지만 어플리케이션 전체에 수 많은 클래스명이 추가되는 경우 이와 같이 사용하여 간단하게 추가할 수 있습니다.
! 다이나믹하게 즉시 클래스명을 추가하거나 변경하려면?
커스텀 디렉티브는 two way binding이 동작하는 모델과는 다르므로 다이나믹하게 적용하기 어렵습니다. 이 경우에는 다른 방법이 필요합니다. 예를들면 v-if를 함께 사용하는 방법도 대안이 될 수 있습니다.<button v-if="isTrue" v-addClass="active">Okay</button>
위와같이 isTrue라는 변수를 Data에 등록하여 false로 설정... 다시 true로 사용할 경우 DOM을 다시 그리게 될 것이므로 원하는 클래스명으로 addClass 디렉티브를 적용하는 것이 가능해 질 것입니다.
아래의 글도 찾고 계시지 않나요?
