앞서 배운 보간법({{ }})이 단순히 텍스트를 렌더링하는 것이라면, 디렉티브(Directives)는 HTML 요소의 속성(Attribute)을 제어하거나, DOM을 조작(표시/숨김, 반복 등)하는 Vue의 핵심 기능입니다.

1. 문법 (Syntax)

Vue의 디렉티브는 모두 v- 라는 접두사를 가집니다. 이는 Vue가 관리하는 특수 속성임을 나타내며, 렌더링 시 DOM에 반응형 동작을 적용합니다.

• 기본 형태: <태그 v-디렉티브="값">
• 예시: <div v-if="seen"> (seen 변수 값에 따라 div 표시 여부 결정)

2. 핵심 디렉티브 4가지 (Core Directives)

Vue 개발에서 가장 빈번하게 사용되는 필수 디렉티브입니다.

• v-bind (단축 문법 :)
  • HTML 태그의 속성(Attribute) 값에 데이터를 동적으로 연결합니다.
  • src, href, class, style 등에 주로 사용됩니다.
  • 예: <img :src="imageUrl">
• v-on (단축 문법 @)
  • DOM 이벤트(Event)를 수신하고 트리거합니다.
  • 클릭(click), 입력(input), 제출(submit) 등을 감지합니다.
  • 예: <button @click="doSomething">
• v-if / v-show
  • 조건부 렌더링을 수행합니다.
  • v-if: 조건이 거짓이면 DOM에서 아예 제거합니다. (전환 비용 높음)
  • v-show: 조건이 거짓이면 CSS display: none 처리만 합니다. (초기 렌더링 비용 높음)
  • 예: <div v-if="isLogin">환영합니다</div>
• v-for
  • 배열이나 객체의 데이터를 기반으로 요소를 반복 렌더링합니다.
  • 반드시 유니크한 key 속성을 함께 사용해야 성능상 유리합니다.
  • 예: <li v-for="item in items" :key="item.id">{{ item.text }}</li>

3. 예제 코드 (Example)

Script (데이터 정의)

JavaScript

<script setup> const url = "<https://google.com>"; // 링크 주소 데이터 const isVisible = true; // 조건부 렌더링을 위한 boolean 값 </script>

Template (화면 출력)

HTML

`<template> <a :href="url">구글로 이동</a>

<p v-if="isVisible">조건이 참이므로 이 텍스트는 표시됩니다.</p> </template>`

요약 (Summary)