🌳 Vue의 Teleport로 모달 시스템 우아하게 구성하기
Vue 고급 시리즈 > 7️⃣ 고급 주제 및 최적화 > Teleport를 활용한 모달 시스템 구성
- 1. Teleport란?
- 2. 왜 필요한가? (기존 구조의 한계)
- 3. 기본 사용법
- 4. Teleport로 모달 구현하기
- 5. 스타일 충돌 방지 및 포지셔닝 팁
- 6. 실전 예제: 공통 모달 Teleport 구조
- 7. 팁과 주의사항
- 🔚 다음 글 안내
1. Teleport란?
Teleport는 Vue 3에서 새로 도입된 기능으로, 컴포넌트의 실제 DOM 렌더링 위치를 지정된 노드로 전송해주는 기능입니다. 마치 순간이동(Teleport)처럼, <div id="app"> 외부에 DOM을 렌더링할 수 있습니다.
2. 왜 필요한가?
- 모달, 툴팁, 드롭다운 등은 종종 루트 노드 외부에서 렌더링되어야 레이아웃에 영향을 덜 줍니다.
- 그렇지 않으면
z-index문제,overflow: hidden에 가려지는 이슈, 부모 컴포넌트에 스타일이 종속되는 문제가 발생합니다.
3. 기본 사용법
<teleport to="body">
<div class="my-modal">
모달 내용
</div>
</teleport>위 코드는 해당 요소를 실제 DOM에서 <body> 태그 아래에 렌더링하겠다는 의미입니다.
4. Teleport로 모달 구현하기
1) HTML에 모달 렌더링 영역 준비
<body>
<div id="app"></div>
<div id="modal-root"></div> <!-- Teleport 타겟 -->
</body>2) 모달 컴포넌트 내부
<teleport to="#modal-root">
<div class="modal-backdrop">
<div class="modal-content">
<slot />
</div>
</div>
</teleport>3) 부모 컴포넌트에서 모달 호출
<ModalComponent v-if="showModal">
여기에 원하는 내용 삽입
</ModalComponent>5. 스타일 팁
.modal-backdrop: fixed, 전체화면 덮기.modal-content: absolute + 중앙 정렬
/* 모달 기본 스타일 */
.modal-backdrop {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.modal-content {
background: white;
padding: 30px;
border-radius: 10px;
min-width: 300px;
}6. 실전 예제: 공통 모달 관리 구조
실무에서는 Teleport 기반 모달을 전역으로 한 번만 등록하고, store 또는 mitt로 상태를 제어하는 방식이 자주 사용됩니다.
🔹 전역 Modal.vue
<template>
<teleport to="#modal-root">
<div v-if="visible" class="modal-backdrop">
<div class="modal-content">
<slot :close="close" />
</div>
</div>
</teleport>
</template>
<script setup>
import { ref } from 'vue';
const visible = ref(false);
const open = () => (visible.value = true);
const close = () => (visible.value = false);
defineExpose({ open, close });
</script>🔹 사용 예시
<Modal ref="myModal">
<template #default="{ close }">
<p>모달 본문</p>
<button @click="close">닫기</button>
</template>
</Modal>7. 팁 & 주의사항
- Teleport의 to는 반드시 DOM에 존재해야 합니다. (예:
#modal-root태그가 없으면 렌더링되지 않음) - 모달이 여러 개 필요한 경우 포털 구조와
z-index정리를 함께 고민하세요. v-if+Teleport는 렌더링 타이밍 이슈가 있을 수 있으므로, 필요 시nextTick으로 타이밍 보정
🔚 다음 글 예고
Teleport를 활용해 모달을 보다 깔끔하고 유연하게 처리할 수 있습니다.
다음 글에서는 Composition API vs Options API 비교를 통해 구조적 차이와 실무 선택 기준을 살펴보겠습니다.
'framework_library > vue' 카테고리의 다른 글
| 🌳 Vue 컴포넌트 메모리 누수 방지 패턴 (0) | 2025.05.06 |
|---|---|
| 🌳 Composition API vs Options API - 무엇을 언제 써야 할까? (0) | 2025.05.05 |
| 🌳 Vue의 <keep-alive>와 캐싱 전략 완전정복 (0) | 2025.05.05 |
| 🌳Vue Suspense와 defineAsyncComponent - API 로딩 대기와 에러 핸들링 집중 탐구 (1) | 2025.05.05 |
| 📌 글로벌 컴포넌트 등록 전략 (0) | 2025.05.05 |
댓글