Teleport 컴포넌트란 무엇인가요?

Question

Accepted Answer

``는 컴포넌트의 마크업을 컴포넌트 트리에서 선언된 위치와 **다른 DOM 위치에 렌더링**합니다 — 동시에 논리적으로는 컴포넌트의 일부로 유지됩니다(반응성, props, 이벤트가 모두 그대로 동작). ## 해결하는 문제 모달, 툴팁, 알림은 종종 CSS 문제를 피하기 위해 **``의 직접 자식**이 되어야 합니다 — 부모의 `overflow: hidden`, `transform`, `z-index` 쌓임 맥락(stacking context)이 모달을 잘라내거나 잘못 레이어링할 수 있습니다. 하지만 논리적으로 모달은 이를 트리거하는 컴포넌트에 속합니다. ## Teleport 사용 ```vue ``` 모달 마크업은 실제 DOM에서 ``의 자식이 되도록 **이동**하여 잘림/쌓임 부모를 벗어나지만, `open`, `@click`, 그리고 모든 props는 완전히 반응형으로 유지됩니다 — 논리적으로는 여전히 이 컴포넌트의 일부이기 때문입니다. ## "to body"가 레이아웃 버그를 고치는 이유 ```text Teleport 없이: Teleport to="body"와 함께:

... ← 잘림/갇힘 ← 자유로움, 모든 것 위에 ``` 갇히게 하는 조상을 벗어남으로써, 모달은 전체 뷰포트를 안정적으로 덮고 예측 가능한 `z-index`로 다른 모든 콘텐츠 위에 위치할 수 있습니다. ## 대상은 어떤 선택자든 가능 ```vue ... ... ``` ## 왜 중요한가 Teleport는 오버레이(모달, 툴팁, 토스트, 드롭다운)가 DOM 조상에 의해 잘리거나 잘못 쌓이는 고전적인 CSS 문제를 깔끔하게 해결합니다. 오버레이를 논리적으로 속한 곳(트리거 컴포넌트 내부, 완전한 반응성과 함께)에 작성하면서도, DOM에서 필요한 위치(보통 ``)에 렌더링하게 해줍니다. 이는 React 포털에 해당하는 Vue의 내장 기능입니다 — 오버레이 UI를 구축하는 표준적이고 견고한 방법입니다.