<Vue.js> v-directives

Vue.js에서 v-로 시작하는 특수 속성들을 디렉티브(directives)라고 합니다.

디렉티브는 DOM 요소에 특정한 동작을 주입하기 위해 사용되며, Vue의 반응성 시스템을 활용하여 데이터의 변경에 따라 DOM을 동적으로 업데이트합니다.

---

주요 v- 디렉티브들

1. v-bind
   • 사용 목적: HTML 속성에 Vue.js의 데이터를 바인딩할 때 사용합니다.
   • 사용 예시:
   • <img v-bind:src="imageUrl" alt="Example Image">
   • v-bind는 약어로 :를 사용할 수 있습니다.
   • <img :src="imageUrl" alt="Example Image">
2. v-model
   • 사용 목적: 양방향 바인딩을 위해 사용합니다. 주로 폼 요소(input, select, textarea 등)에서 사용되며, 사용자 입력과 데이터 상태를 동기화합니다.
   • 사용 예시:
   • <input v-model="username" placeholder="Enter your name"> <p>Hello, {{ username }}!</p>
   • 이 디렉티브는 입력값을 데이터 속성과 연결해, 사용자 입력이 있을 때마다 데이터를 자동으로 업데이트합니다.
3. v-if, v-else-if, v-else
   • 사용 목적: 조건부 렌더링을 위해 사용합니다. 특정 조건에 따라 DOM 요소를 렌더링하거나 제거합니다.
   • 사용 예시:
   • <p v-if="isLoggedIn">Welcome back!</p> <p v-else>Please log in.</p>
4. v-show
   • 사용 목적: 요소를 조건에 따라 보여주거나 숨길 때 사용합니다. v-if와 달리 요소를 DOM에서 제거하지 않고, display 속성을 조작합니다.
   • 사용 예시:
   • <p v-show="isVisible">This text is visible based on isVisible.</p>
5. v-for
   • 사용 목적: 배열이나 객체의 항목들을 반복 렌더링하기 위해 사용합니다.
   • 사용 예시:
   • <ul> <li v-for="(item, index) in items" :key="index">{{ item.name }}</li> </ul>
   • v-for는 key 속성을 사용해 각 항목을 고유하게 식별해야 하며, 이는 성능 최적화와 버그 방지에 중요한 역할을 합니다.
6. v-on
   • 사용 목적: DOM 이벤트를 처리하기 위해 사용합니다. 클릭, 키 입력, 마우스 오버 등의 이벤트를 Vue의 메소드에 연결합니다.
   • 사용 예시:
   • <button v-on:click="handleClick">Click me</button>
   • v-on은 약어로 @를 사용할 수 있습니다.
   • <button @click="handleClick">Click me</button>
7. v-text
   • 사용 목적: 요소의 textContent를 업데이트합니다. Mustache 구문({{ }})을 사용할 수 있지만, v-text는 디렉티브로 명시적으로 텍스트를 렌더링할 때 유용합니다.
   • 사용 예시:
   • <p v-text="message"></p>
8. v-html
   • 사용 목적: HTML 마크업을 렌더링하기 위해 사용합니다. 데이터를 HTML로 출력해야 할 때 사용하지만, XSS 공격의 위험이 있으므로 주의가 필요합니다.
   • 사용 예시:
   • <div v-html="rawHtml"></div>
9. v-cloak
   • 사용 목적: Vue 컴포넌트의 초기 렌더링을 완료할 때까지 깜빡임(flash)을 방지하기 위해 사용됩니다. 이 디렉티브가 있는 요소는 Vue가 완전히 로드될 때까지 렌더링되지 않습니다.
   • 사용 예시:
   • <div v-cloak>{{ message }}</div>
10. v-pre
    • 사용 목적: 이 디렉티브가 사용된 요소 및 하위 요소들을 Vue의 컴파일링에서 제외시킵니다. 이는 정적인 콘텐츠를 포함할 때 유용합니다.
    • 사용 예시:
    • <span v-pre>{{ this message will not be compiled }}</span>
11. v-once
    • 사용 목적: 특정 요소를 한 번만 렌더링하고, 이후에는 재활용할 때 사용합니다. 이는 성능 최적화에 도움이 됩니다.
    • 사용 예시:
    • <span v-once>{{ message }}</span>

 

---

커스텀 디렉티브

Vue.js에서는 기본 제공 디렉티브 외에도, 개발자가 직접 디렉티브를 정의할 수 있습니다.

커스텀 디렉티브 예시:

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

<input v-focus>

위 예시에서는 v-focus라는 커스텀 디렉티브를 정의하고, 해당 디렉티브가 적용된 요소에 포커스를 자동으로 설정하는 기능을 추가했습니다.

 

---

Vue 디렉티브는 HTML 요소에 Vue.js의 반응형 기능을 부여하는 강력한 도구입니다. 이를 통해 데이터와 DOM 간의 연결을 효율적으로 관리할 수 있으며, 다양한 방식으로 DOM 조작을 자동화할 수 있습니다. v-로 시작하는 다양한 디렉티브를 이해하고 활용하면, 더 간결하고 효율적인 Vue.js 애플리케이션을 만들 수 있습니다.