TIL 230803 [Vue] <template> == Fragment tag

v-if를 쓸 때 쓸데없는 html 태그가 렌더되는 것을 원치 않을 때는 <template>를 쓰면 된다! v-if와 함께 쓰면 html가 렌더되지 않는다. 

<template>
  <div class="background">
    <div class="write-modal">
      <h4 class="title">작성하기</h4>
      <template v-if="true"> // template 사용
        <div>TEST</div>
      </template>
      <button class="close-btn" @click="clickHideModalBtn">
        <span
          class="pi pi-times icon"
          style="font-size: 1.2rem; color: #000"
        ></span>
      </button>
    ...
  </div>
</template>

렌더 된 html 태그

 

v-if 없이 사용하면 일반 html template 태그로 인식하는 것 같다.. 🤔