Vue3의 혁신 기능: Teleport와 Suspense 완벽 가이드

Vue3에서는 사용자 경험을 향상시키고 컴포넌트 구조를 유연하게 하기 위해 Teleport와 Suspense라는 두 가지 새로운 기능이 도입되었습니다. 이 글에서는 이 두 기능이 무엇이며, 언제, 어떻게 사용하는지 자세히 알아보겠습니다.

1. Teleport란?

정의
Teleport는 컴포넌트의 렌더링 위치를 현재 DOM 트리 바깥으로 옮길 수 있는 기능입니다. 모달, 알림창, 툴팁 등 시각적으로 상위 DOM 요소에 위치해야 할 때 유용합니다.

문법 예시

<template>
  <div>
    <h1>본문 내용</h1>

    <teleport to="body">
      <div class="modal">
        <p>모달 내용입니다</p>
      </div>
    </teleport>
  </div>
</template>

주요 속성

속성	설명
to	렌더링할 대상 DOM 셀렉터 (예: body, #modal-root)
disabled	true일 경우 teleport 기능을 사용하지 않음

사용 시점

• 모달창, 툴팁처럼 DOM 상단에 위치해야 하는 UI
• 외부 스타일의 영향을 받지 않아야 할 경우
• 애니메이션 및 포지셔닝 제어가 중요한 요소

CSS 예시

.modal {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

2. Suspense란?

정의
Suspense는 비동기 컴포넌트가 로딩되는 동안 fallback UI를 보여주는 기능입니다. React의 Suspense와 유사한 개념이며, 사용자에게 부드러운 UX를 제공합니다.

문법 예시

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>로딩 중...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
)
</script>

언제 사용하나요?

• 무거운 컴포넌트를 코드 분할하고 싶을 때
• 느린 API 데이터를 받아오는 컴포넌트에 로딩 화면을 따로 보여주고 싶을 때

특징

기능	설명
#fallback	로딩 중 보여줄 UI
defineAsyncComponent	동적으로 컴포넌트 로딩

Teleport vs Suspense 차이점 정리

항목	Teleport	Suspense
목적	렌더링 위치 제어	비동기 로딩 처리
사용 대상	위치 제약 있는 UI	비동기 컴포넌트
핵심 기능	to 속성으로 DOM 이동	fallback UI 제공
실사용 예	모달, 알림창	느린 컴포넌트, 데이터 기반 뷰

실제 사용 예제

예: 모달을 열 때 외부에 띄우기

<template>
  <button @click="show = true">모달 열기</button>

  <teleport to="#modal-root">
    <div v-if="show" class="modal">
      <p>Teleport로 이동된 모달입니다.</p>
      <button @click="show = false">닫기</button>
    </div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

예: Suspense로 비동기 컴포넌트 처리

<Suspense>
  <template #default>
    <ChartComponent />
  </template>
  <template #fallback>
    <p>차트를 불러오는 중입니다...</p>
  </template>
</Suspense>

<script setup>
import { defineAsyncComponent } from 'vue'

const ChartComponent = defineAsyncComponent(() =>
  import('./HeavyChart.vue')
)
</script>

마무리

Vue3의 Teleport와 Suspense는 사용자 인터페이스의 위치 제어와 비동기 처리를 획기적으로 개선해주는 기능입니다.
이 기능들을 적절히 사용하면, 모달이나 로딩화면 같은 UX를 훨씬 부드럽고 세련되게 구현할 수 있습니다.