템플릿 문법과 디렉티브

template 은 데이터를 화면에 끼워 넣고, 속성을 바인딩하고, 이벤트를 연결하고, 조건과 반복을 표현하는 곳입니다. Vue 템플릿의 문법은 대부분 평범한 HTML이지만 몇 가지 특별한 표기가 더해집니다. 이번 강의에서 그 핵심 문법을 정리합니다.

학습 목표

• 텍스트 보간 {{ }} 으로 데이터를 화면에 출력한다.
• v-bind(:)와 v-on(@)으로 속성과 이벤트를 바인딩한다.
• v-if/v-else/v-show 의 차이를 이해하고 상황에 맞게 쓴다.
• v-for 로 리스트를 반복하고 key 를 올바르게 지정한다.

텍스트 보간

이중 중괄호 {{ }} 안에 표현식을 쓰면 그 결과가 텍스트로 출력됩니다.

<script setup>
import { ref } from 'vue';
const user = ref('민수');
const price = ref(1000);
</script>

<template>
  <p>안녕하세요, {{ user }}님</p>
  <p>가격: {{ price * 1.1 }}원 (부가세 포함)</p>
</template>

💡 TIP — {{ }} 안에는 하나의 표현식만 들어갈 수 있습니다. if (x) {...} 같은 문장은 안 되지만 삼항 연산자 x ? 'a' : 'b' 는 됩니다.

v-bind — 속성 바인딩

요소의 속성값을 데이터와 묶으려면 v-bind: 를, 보통은 축약형 : 을 씁니다.

<template>
  <img :src="imgUrl" :alt="title" />
  <a :href="'/post/' + postId">게시글 보기</a>
  <button :disabled="loading">저장</button>
</template>

:disabled="loading" 처럼 boolean 값을 묶으면 값이 참일 때만 속성이 붙습니다.

v-on — 이벤트 처리

이벤트를 듣고 함수를 실행하려면 v-on: 또는 축약형 @ 를 씁니다.

<script setup>
import { ref } from 'vue';
const count = ref(0);
const add = (n) => (count.value += n);
</script>

<template>
  <button @click="count++">직접 증가</button>
  <button @click="add(5)">5 증가</button>
  <p>{{ count }}</p>
</template>

@click="count++" 처럼 인라인 식을 쓸 수도 있고, @click="add(5)" 처럼 함수를 호출할 수도 있습니다.

조건부 렌더링 — v-if / v-else / v-show

<template>
  <p v-if="score >= 90">A 등급</p>
  <p v-else-if="score >= 80">B 등급</p>
  <p v-else>C 이하</p>

  <div v-show="isOpen">토글로 보이는 영역</div>
</template>

디렉티브	동작	언제 쓰나
v-if	조건이 거짓이면 DOM에서 아예 제거	자주 안 바뀌는 경우
v-show	DOM에는 남고 display:none 으로 숨김	자주 토글되는 경우

⚠️ 주의 — v-if 와 v-for 를 같은 요소에 함께 쓰지 마세요. 의도가 모호해지고 우선순위 문제가 생깁니다. 필요하면 바깥에 <template> 래퍼를 두고 나눠 쓰세요.

리스트 렌더링 — v-for

<script setup>
import { ref } from 'vue';
const todos = ref([
  { id: 1, text: '장보기' },
  { id: 2, text: '청소하기' },
]);
</script>

<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="todo.id">
      {{ index + 1 }}. {{ todo.text }}
    </li>
  </ul>
</template>

v-for 에는 반드시 고유한 :key 를 지정해야 합니다. Vue가 각 항목을 추적해 효율적으로 다시 그리기 위해서입니다.

💡 TIP — key 로 배열 index 를 쓰는 건 항목 순서가 바뀌거나 중간 삽입·삭제가 있을 때 버그를 만듭니다. 가능하면 데이터의 고유 id 를 쓰세요.

표현식의 제한

템플릿 안의 표현식은 단일 표현식만 허용됩니다.

<template>
  <!-- O 가능 -->
  <p>{{ ok ? '성공' : '실패' }}</p>
  <p>{{ name.toUpperCase() }}</p>

  <!-- X 불가능 (문장/선언) -->
  <!-- {{ const x = 1 }} -->
  <!-- {{ if (ok) {...} }} -->
</template>

복잡한 계산은 computed(다음 강의)로 빼는 것이 좋습니다.

요약

• {{ }} 으로 데이터를 텍스트로 출력한다.
• : 는 v-bind, @ 는 v-on 의 축약이다.
• v-if 는 DOM에서 제거, v-show 는 숨김만 한다.
• v-for 에는 고유 :key 를 붙이고, 가급적 id 를 쓴다.

연습문제

1. ref 로 만든 isLogin 값에 따라 "로그인" 또는 "로그아웃" 버튼을 v-if/v-else 로 보여 주세요.
2. 과일 이름 배열을 v-for 로 <li> 목록으로 출력하고 :key 를 적절히 지정해 보세요.
3. 버튼을 누르면 isOpen 을 토글하고, v-show 로 박스를 보이거나 숨겨 보세요.
4. :class 없이 :style="{ color: textColor }" 형태로 글자색을 데이터와 묶어 보세요.

힌트 — 토글은 isOpen = !isOpen. 배열은 ['사과','바나나'] 처럼 인덱스를 :key 로 써도 되지만 변형이 없을 때만 안전합니다.