Vue - 사용자 지정 directive

Vue - 사용자 지정 directive

 

 

 

Vue에서 directive는 Vue 자체에서 내장하고 있는 directive와 사용자 지정 directive가 있다.

전자의 경우 html태그를 보다 동적으로, 효율적으로 다룰 수 있게 해주고, 후자의 경우는 사용자가 직접 디렉티브 지시어를 설정해 사용함으로써 특정 기능을 만들 수 있다.

이번 게시글에서는 사용자 지정 directive를 다뤄볼 것이다.

 

 

왜 사용자 지정 directive를 사용하는가? 

1) 지시어를 선언함으로써 재사용성이 증가한다. (여러 컴포넌트에서 사용할 때)

2) 개발자의 의도로 directive hook을 통해 DOM에 side-effect를 줄 수 있다. (mounted 훅의 코드를 줄여주는 등)

 

사용자 지정 directive에는 전역과 지역 두 가지 방법으로 정의할 수 있다.

 

전역 directive 정의

 

 

지역 directive 정의

 

이러한 directive는 훅에 따라서 언제 지시어를 적용시킬지를 적용 시킬 수가 있는데 훅 함수는 아래와 같다.

  훅 함수   

bind, inserted, update, componentUpdated, unbind가 존재한다.

 

bind : 디렉티브가 처음 앨리먼트에 바인딩 될 때 한 번만 수행. -> 일회성인 코드는 이곳에 정의

inserted : 바인딩 된 엘리먼트가 부모 노드에 삽입 되었을 때 수행 -> mounted와 비슷한 역할을 하는 훅.

update : 컴포넌트가 업데이트 된 후에 실행 -> 자식이 업데이트 하기 전일 수도 있다.

componentUpdated : 컴포넌트 안의 자식들이 업데이트 된 후에 실행.

unbind : 디렉티브가 엘리먼트로부터 인바인드 될 때 한 번 수행.

 

  디렉티브 훅 전달인자   

el : 디렉티브가 바인딩된 엘리먼트. 이를 이용해 DOM 조작 가능.

binding : 여러가지 속성을 가진 객체. ex) name, value, arg, modifiers

 

예시 코드

html 부분

 

script 부분

 

결과

 

코드를 살펴보자면 JSON.stringify는 값을 Json형태로 바꿔주는 메서드이고, name은 디렉티브 이름, value는 전달받은 값. arg는 전달되는 인자이다.

 

이 directive의 arg속성은

 <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>

와 같이 동적으로도 조작이 가능하다. 즉 direction이 script의 data부분에서 정의되어있을 때 반응형으로 조작할 수 있다.