Vue에서 <template> 태그는 언제 써야 할까?

 

Vue를 쓰다 보면 <template>이라는 태그를 여기저기서 많이 보게 된다.
HTML에서도 <template>은 있지만, Vue에서의 용도는 조금 다르다.
Vue에서는 "조건부 렌더링이나 반복 렌더링에서 여러 요소를 묶는 용도"로 사용한다.

---

<template>이 필요한 이유

Vue 컴포넌트에서 v-if나 v-for는 기본적으로 하나의 태그에만 적용할 수 있다.
하지만 때때로 조건에 따라 여러 개의 태그를 한꺼번에 렌더링하고 싶을 때가 있다.

---

잘못된 예 (Vue가 오류냄)

<div v-if="isLogin">로그인됨</div>
<p>환영합니다</p>

위 코드는 "로그인됨"은 조건부지만, "환영합니다"는 항상 나오는 구조라 의도한 UI가 아니다.

---

올바른 예 - <template>으로 묶기

<template v-if="isLogin">
  <div>로그인됨</div>
  <p>환영합니다</p>
</template>

<template>은 실제 DOM에 렌더링되지 않고, 내부의 태그만 출력된다.
조건문에 여러 태그를 그룹으로 적용할 때 필수적이다.

 

반복 렌더링(v-for)도 마찬가지

<template v-for="item in items" :key="item.id">
  <div>{{ item.title }}</div>
  <p>{{ item.description }}</p>
</template>

item 하나당 <div>, <p> 두 요소를 반복해서 렌더링하려면 반드시 <template>으로 감싸야 한다.

 

정리

상황 <template> 필요 여부

v-if + 태그 하나	❌ 불필요
v-if + 태그 여러 개	✅ 필수
v-for + 태그 여러 개	✅ 필수
조건문 안에서 하나는 텍스트, 하나는 컴포넌트	✅ 템플릿 필요 (예: v-chip 안)