Vue의 Directive

• HTML 요소에 적용되어 Vue의 데이터와 DOM을 연결하는 특수 토큰 (주로 v- 접두어로 표현됨)
• 공식 문서 : https://vuejs.org/api/built-in-directives.html#built-in-directives

---

자주 사용하는 Directive

1. v-bind

v-bind 디렉티브는 HTML 태그의 속성을 Vue 인스턴스의 데이터와 동적으로 바인딩합니다. 주로 HTML 속성을 업데이트하기 위해 사용됩니다.

예시 코드:

<!-- 전체 표현 -->
<div v-bind:id="dynamicId"></div>

<!-- 축약표현 -->
<div :id="dynamicId"></div>

2. v-on

v-on 디렉티브는 DOM 이벤트를 듣고 그에 대한 반응으로 메서드를 실행합니다. 이벤트 핸들링을 위해 사용됩니다.

예시 코드:

<button v-on:click="doSomething">클릭하세요</button>

<!-- 축약표현 -->
<button @click="doSomething">클릭하세요</button>

3. v-model

v-model 디렉티브는 폼 입력과 앱 상태 사이의 양방향 데이터 바인딩을 생성합니다. 주로 <input>, <textarea> 또는 <select> 요소에 사용됩니다.

예시 코드:

<input v-model="message" placeholder="메시지를 입력하세요">

4. v-for

v-for 디렉티브는 배열이나 객체의 각 항목에 대해 반복적인 DOM 요소를 렌더링하기 위해 사용됩니다.

예시 코드:

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

5. v-if, v-else-if, v-else

이 세 디렉티브는 조건부 렌더링을 수행합니다. v-if는 조건이 참일 때 요소를 렌더링하고, v-else-if와 v-else는 체인 조건을 제공합니다.

예시 코드:

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Type C</div>

6. v-show

v-show 디렉티브는 조건에 따라 요소의 display CSS 속성을 토글합니다. v-if와 비교했을 때, v-show는 요소를 항상 DOM에 유지하며 보이거나 숨김 처리만 합니다.

예시 코드:

<div v-show="isVisible">보이거나 숨겨집니다.</div>

---

특별한 경우로 사용하는 Directive

7. v-pre

v-pre 디렉티브는 해당 태그 내의 컴파일을 건너뛰고 원시 HTML을 그대로 유지합니다. 특정 요소를 Vue의 컴파일 과정에서 제외하고자 할 때 매우 유용합니다. 다른 데이터 바인딩이나 디렉티브 없이 정적인 컨텐츠를 빠르고 그대로 유지하고 싶을 때 주로 사용됩니다.

예시 코드:

<span v-pre>{{ this will not be compiled }}</span>

8. v-cloak

v-cloak 디렉티브는 Vue 인스턴스가 준비될 때까지 템플릿의 깜박임을 방지합니다. 보통 CSS와 함께 사용되어 초기 렌더링 시 보이지 않게 처리합니다. 예를 들어, Vue 인스턴스가 준비되기 전에 사용자가 화면에서 "{{ message }}" 같은 템플릿 구문을 보는 것을 피하고자 할 때 v-cloak 디렉티브를 사용합니다.

예시 코드:

<!-- CSS -->
[v-cloak] { display: none; }

<!-- HTML -->
<div v-cloak>
  {{ message }}
</div>

9. v-once

v-once 디렉티브는 요소와 모든 자식 요소의 데이터 바인딩을 단 한 번만 수행하고, 그 이후에는 데이터 변경을 반영하지 않습니다. 이는 불변 데이터의 성능 최적화에 유용합니다.

예시 코드:

<div v-once>
  처음 할당된 {{ message }}는 변경되지 않습니다.
</div>

10. v-slot

v-slot 디렉티브는 슬롯을 사용해 자식 컴포넌트로부터 템플릿을 받아 표시합니다. 이름이 있는 슬롯 또는 스코프가 있는 슬롯으로 사용될 수 있습니다.

예시 코드:

<!-- 자식 컴포넌트 -->
<template>
  <div>
    <slot name="header">기본 헤더</slot>
    <slot>기본 본문</slot>
    <slot name="footer">기본 푸터</slot>
  </div>
</template>

<!-- 부모 컴포넌트 -->
<ChildComponent>
  <template v-slot:header>
    <h1>사용자 정의 헤더</h1>
  </template>
  <template v-slot:default>
    <p>사용자 정의 본문</p>
  </template>
  <template v-slot:footer>
    <footer>사용자 정의 푸터</footer>
  </template>
</ChildComponent>

11. v-memo

Vue 3에서 추가된 v-memo 디렉티브는 주어진 종속성이 변경될 때만 DOM을 업데이트하는 최적화를 제공합니다. 이는 반복적인 렌더링 비용이 높은 부분에서 성능을 개선하는 데 사용됩니다. 지정된 종속성 배열에 있는 값이 변경될 때만 요소를 다시 렌더링합니다. 그 외의 경우에는 이전 렌더링 결과를 재사용하여 불필요한 DOM 업데이트를 방지합니다.

예시 코드:

<div v-for="item in items" v-memo="[item.id]">
  {{ item.content }}
</div>