재사용 & 컴포지션(2) - 사용자 지정 디렉티브

참고한 사이트

v3.vuejs-korea.org/ko-kr/guide/custom-directive.html

 

---

1. 사용자 지정 디렉티브

Vue는 코어에 포함된 기본 디렉티브 세트 외에도 사용자 정의 디렉티브를 등록할 수 있다. 

 

 

1) 디렉티브 등록 방법

사용자 지정 디렉티브를 등록하는 방법은 2가지 방법이 있다.

1. 전역으로 등록하는 방법
2. 로컬 검포넌트에 등록하는 방법 

 

전역 선언

Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜준다.

// 전역 사용자 정의 디렉티브 v-focus 등록
Vue.directive('focus', {
  // 바인딩 된 엘리먼트가 DOM에 삽입되었을 때...
  inserted: function (el) {
    // 엘리먼트에 포커스를 줍니다
    el.focus()
  }
})

 

지역 선언

지시어를 로컬로 등록하기 위해서 컴포넌트는 directives 옵션을 허용하면 된다.

directives: {
  focus: {
    // 디렉티브 정의
    inserted: function (el) {
      el.focus()
    }
  }
}

 

2) 등록한 디렉티브 사용

템플릿에서 다음과 같이 모든 요소에서 새롭게 지정해준 디렉티브인 v-focus 속성을 사용할 수 있다.

<input v-focus>

 

2. 훅 함수

디렉티브 정의 객체는 여러가지 훅 함수(선택사항)를 제공한다.

훅 함수	설명
beforeMount	디렉티브가 처음 엘리먼트에 바인딩 되고 부모 컴포넌트가 마운트되기전에 호출합니다. 이곳에서 한번 실행되는 초기 세팅을 할 수 있습니다.
mounted	바인딩된 요소의 부모 컴포넌트가 마운트될때 호출됩니다.
beforeUpdate	포함된 컴포넌트의 VNode가 갱신되기 전에 호출이 됩니다.
updated	포함된 컴포넌트의 VNode 그리고 컴포넌트의 자식들의 VNodes들이 업데이트 되고 난뒤에 호출됩니다.
beforeUnmount	바인딩된 요소의 부모 컴포넌트가 언마운티드되기 전에 호출됩니다.
unmounted	요소로부터 디렉티브가 언바인드 될때 그리고 부모 컴포넌트 가 언마운트될때, 한번 호출됩니다.

Custom Directive API에서 이러한 훅들에 전달된 인자들을 확인할 수 있다.