Vue3의 변화: Fragments 지원으로 루트 노드가 두 개 이상 가능해졌다고?

Vue2에서는 모든 컴포넌트가 하나의 루트 노드만 가질 수 있었습니다. 하지만 Vue3부터는 Fragments 기능을 통해 여러 루트 노드를 허용함으로써 더 깔끔하고 유연한 컴포넌트 구조를 만들 수 있게 되었습니다. 이번 글에서는 Vue3의 Fragments 기능이 무엇인지, 왜 중요한지, 그리고 실제 사용 예시까지 살펴보겠습니다.

1. Vue2의 한계: 루트 노드 제약

Vue2에서는 다음과 같은 코드가 오류를 발생시킵니다.

<!-- Vue2에서는 불가능 -->
<template>
  <div>헤더</div>
  <div>본문</div>
</template>

❌ Error: Component template should contain exactly one root element.

그래서 Vue2에서는 불필요한 wrapper div를 사용해서 하나의 루트 노드로 감싸야 했습니다.

<!-- Vue2에서의 해결 방법 -->
<template>
  <div>
    <div>헤더</div>
    <div>본문</div>
  </div>
</template>

2. Vue3의 변화: Fragments 기능 도입

Vue3에서는 템플릿 내에 여러 개의 루트 노드 사용이 가능합니다. 더 이상 불필요한 래퍼 엘리먼트를 사용하지 않아도 됩니다.

<!-- Vue3에서는 완전히 허용 -->
<template>
  <div>헤더</div>
  <div>본문</div>
</template>

이렇게 작성해도 아무런 오류 없이 정상 렌더링됩니다.

Fragments 도입의 장점

장점	설명
DOM 구조 단순화	불필요한 div 제거로 깔끔한 마크업 유지
스타일 관리 용이	wrapper div 때문에 발생하는 스타일 꼬임 방지
컴포넌트 재사용성 향상	slot 사용 시 더 자연스러운 구조 가능

3. 실사용 예제

예시 1: 여러 노드 반환

<!-- MyComponent.vue -->
<template>
  <h1>제목</h1>
  <p>설명 문구</p>
</template>

이 컴포넌트를 부모 컴포넌트에서 사용해도 정상적으로 출력됩니다.

<!-- App.vue -->
<template>
  <MyComponent />
</template>

<script setup>
import MyComponent from './MyComponent.vue'
</script>

예시 2: Slot에서의 자연스러운 구조

<!-- ParentComponent.vue -->
<template>
  <Card>
    <h2>제목</h2>
    <p>내용</p>
  </Card>
</template>

<!-- Card.vue -->
<template>
  <div class="card">
    <slot />
  </div>
</template>

Vue2였다면 slot 안에 불필요한 div를 하나 더 감쌌어야 했지만,
Vue3에서는 <slot /> 안에 여러 노드가 들어가도 아무 문제 없습니다.

주의할 점

• Fragments는 <template> 내부에서만 허용됩니다.
• 컴포넌트 최상단에서 여러 노드를 반환할 수 있지만,
  SFC 외부 (script, style 등)는 여전히 기존 규칙을 따라야 합니다.

마무리

Vue3의 Fragments 기능은 사소해 보이지만 개발 생산성과 마크업 품질을 모두 향상시키는 변화입니다. 더 이상 불필요한 wrapper div를 쓰지 않아도 되며, 스타일링, 구조화, 유지보수 모두에서 이점을 제공합니다.

요약

항목	Vue2	Vue3
루트 노드 개수	1개만 허용	여러 개 허용 (Fragments)
불필요한 wrapper	필요함	필요 없음
slot 사용 시 유연성	낮음	높음