[Udemy Vue 완벽가이드 Section9] 122. 프레그먼트(Fragment) 활용하기

컴포넌트의 또 다른 기능이 있다.

 

TheHeader.vue 컴포넌트에서는 header요소의 하나의 루트 HTML 요소만을 가진다. 다른 요소인 h1은 header의 자식요소이다.

<!--TheHeader.vue-->
<template>
  <header>
    <h1>More on Vue Components</h1>
  </header>
</template>

 

한편 ManageGoals.vue와 같은 컴포넌트에서는 div태그를 제거하면 여러 개의 상위레벨의 HTML 요소를 가진다.

<!--ManageGoals.vue-->
<template>
    <h2>Manage Goals</h2>
    <input type="text" ref="goal" />
    <button @click="setGoal">Set Goal</button>
    <teleport to="body">
      <error-alert v-if="inputIsInvalid">
        <h2>Input is invalid!</h2>
        <p>Please enter at least a few characters..</p>
        <button @click="confirmError">Okay</button>
      </error-alert>
    </teleport>
</template>

물론 이런 방식도 괜찮다.

 

# Vue 2

Vue2에서는 위 방식에서 div가 없으면 지원하지 않는다. template 하나에 root 레벨 요소는 오직 하나만을 가져야한다. 그리고 그 안에 원하는만큼 많은 형제요소를 가질 수 있다.

 

# Vue3

Vue3에서는 바뀌었다. 원하는 만큼 많은 상위레벨의 요소를 가질 수 있다.

semantic 또는 스타일링 목적이 아니라면 상위레벨요소를 하나만 유지할 필요가 없다.

 

이 기능을 Fragments라고 한다. 이 기능을 통해 복수의 상위 레벨 요소를 가질 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.