12. 디렉티브 (v-text, v-cloak, v-once, v-memo) | 디렉티브 구성

디렉티브 (directives)

 

디렉티브는 앞에서 말씀드렸던 것처럼 v- 접두사가 있는 특수 속성입니다.

그리고 디렉티브는 그대로 직역하면 지시를 뜻 합니다.

즉, 디렉티브는 기능상에서 중요한 역할인 컴포넌트 (또는 DOM요소) 에게

"~~하게 작동하라" 하고 지시를 해주는 지시문을 말합니다.

 

Vue는 여러내장 디렉티브를 제공합니다

---

v-text

요구값 : string

설명 : 엘리먼트를 업데이트 합니다. textContent의 일부를 업데이트 해야하는 경우 버스태시 보간법을 사용해야 합니다.

 

---

v-cloak

표현식을 요구하지 않습니다

 

사용방법 : 

이 디렉티브는 연결된 컴포넌트 인스턴스가 컴파일을 완료 할 때 까지 엘리먼트에 남아있습니다.

[v-cloack] {display : none} 과 같은 CSS 규칙들이 합쳐진, 이 디렉티브는 컴포넌트 인스턴스가 준비될 때 까지

컴파일 되지 않은 mustache 바인딩을 숨기는데 사용할 수 있습니다.

 

이런걸 이용해서 로딩바를 구현 할 수 있다.

---

v-once

 

표현식을 요구하지 않습니다.

 

설명 : 

엘리먼트와 컴포넌트를 한번(once)만 렌더링 합니다.

이후 재렌더링 할 때 엘리먼트/컴포넌트 및 모든 하위 엘리먼트는 정적 컨텐츠로 처리되고 건너 뜁니다

업데이트 성능을 최적화 하는데 사용할 수 있습니다.

---

v-memo

성능과 관련된 디렉티브 입니다. v-once의 업데이트 버전입니다. 

v-memo="[반응형 데이터]"

괄호 안에 있는 반응형 데이터가 업데이트 되야 하위 엘리먼트들이 업데이트 됩니다

 

하위 엘리먼트들이 업데이트되고 있는데 실시간으로 보여주는거 말고

조건이 충족된 나중에 보여주고 싶을때 사용하면 좋을거 같다.

 

공식문서를 보면 일반적으로 계속 사용하는건 아니고, 성능적으로 최적화가 필요할때 사용한다고 합니다.

일반적인 예로 v-for에서 목록을 렌더링할때 그 길이가 1000개 이상일때 사용하면 좋다고 합니다.

---

디렉티브 구성

 

디렉티브는 다음과 같이 구성되어 있습니다.

 

디렉티브(directives) :

v- 접두사가 있는 특수 속성으로 디렉티브의 값(value)이 변경될때 특정 효과를 반응적으로 DOM에 적용하는것을 말합니다.

 

전달인자(Argument) :

일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자를 가질 수 있습니다.

예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용합니다.

- 동적 전달인자 : 대괄호를 사용하여 전달인자를 동적으로 삽입할 수 있습니다.

<a v-bind : [attributeName]="url"> ... </a>

 

수식어(Modifiers) :

수식어는 점(.)으로 표시되는 특수 접미사로 디렉티브가 특별한 방식으로 바인됭 되어야 함을 나타냅니다.

 

더블 쿼테이션 "" 안에 오는건 value 입니다.