[TIL] Vue - Teleport Components

참고
https://vuejs.org/guide/essentials/template-syntax.html
https://vueschool.io/lessons/vue-3-teleport?friend=vuejs
https://www.youtube.com/watch?v=Mi2TfYu0XuM

💡 지난 Modal 을 구현할 때도 잠깐 Teleport 에 대해 설명을 했지만, Vue 에서 Advanced Topic 이기 때문에 예제와 함께 더 살펴보고자 한다.

이름에서 느껴지는 텔레포트는 어디론가 이동할 수 있는 것을 말한다.

//App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Vue 3" />
    <div id="purple-box" style="bordeR: purple 2px solid; min-height: 50px"></div>
</template>

App.vue 는 자식 컴포넌트 HelloWrold.vue 를 import 한다.

//HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="showMessage = !showMessage">Toggle Message</button>
    <button @click="showModal = true">Show Modal</button>
    <Teleport to="#purple-box">
      <p v-if="showMessage">Hello from HelloWorld</p>
    </Teleport>
  </div>
</template>

HelloWorld.vue 컴포넌트는 부모 컴포넌트에서 id가 purple-box인 div 태그에 맞게 Teleport 태그로 to속성은 #purple-box 를 가리킨다.

Teleport 를 잘 사용한 것 같지만, Teleport 컴포넌트가 지정한 대상 ('#purple-box')를 찾지 못해서 발생한 오류이다. 또한 이 오류는 대상 엘리먼트가 마운트 되기 전에 컴포넌트에 해당 대상을 찾지 못했을 때 발생하며, 문제의 원인은 Teleport 의 대상이 되는 엘리먼트인 #purple-box 가 현재 컴포넌트가 마운트되기 전에는 존재하지 않기 때문이다.

//public > index.html
...
	<div id="app"></div>
    <!-- built files will be auto injected -->
    <div
      id="purple-box"
      style="border: purple 2px solid; min-height: 50px"
    ></div>
...

이 문제를 해결하기 위해 public 폴더의 index.html 에서 id 가 app 인 div 태그 아래에 App.vue 컴포넌트에서 id가 purple-box인 div태그를 여기로 이동시키는 것도 하나의 방법이다. 이 방법은 Vue 앱이 시작하기 전에 #purple-box 가 먼저 생성되어 오류를 방지할 수 있다.

하지만, Vue의 강력한 특성을 활용하려면 Vue 컴포넌트 내에서 엘리먼트를 조작하는 방법을 사용하는 것이 더 좋을 수 있다.(예. mounted 훅)

//App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Vue 3" />
  </div>
  <Teleport to="#purple-box">
    <button>DO NOT CLICK</button>
  </Teleport>
</template>

App.vue 컴포넌트를 수정하고, Index.html 에 div 태그 코드를 추가하면,

App.vue 컴포넌트에는 id가 app인 div 태그 아래에 img 와 HelloWorld 컴포넌트가 자식 요소로 들어가고, Teleport 태그는자식 요소가 아니라 밖으로 빠져있다.

스타일 요소를 위해 밖으로 빼서 위치시키는 경우가 바로 지난 시간에 구현해보았던 모달 UI 이다.

Teleport

애플리케이션 DOM 계층 구조에 깊게 중첩된다는 것을 의미하기 때문에 Teleport 를 이용한다면 렌더링된 DOM 구조만 변경하며 구성 요소의 논리적 계층 구조에는 영향을 주지않는다. 즉, Teleport 구성 요소가 포함된 경우 해당 구성 요소를 포함하는 상위 구성 요소의 논리적 하위 항목으로 유지된다.

to 속성

teleport 태그를 사용할 때는 to 속성을 사용해야 한다.
to 속성의 값으로는 index.html 파일에서 작성한 div 태그의 id 값으로 이동할 대상을 지정한다. DOM 요소의 셀렉터 문자열이나 실제 DOM 요소 자체가 들어갈 수도 있다.

:disabled 속성

true 와 false 의 boolean값으로 활성화시키거나 비활성화시킬 수 있는 속성이다.
Vue3 의 Teleport 컴포넌트에서 직접적으로 제공하지는 않지만, 특정 조건에 따라 설정할 수 있다.

1. :disabled="true"

<template>
  <button @click="show = true">Show modal</button>
  <Teleport to="body" :disabled="true">
    <Modal :show="show" @close="show = false">
      <template #header>
        <h3>custom header</h3>
      </template>
    </Modal>
  </Teleport>
</template>

True 로 설정하게 되면 id 가 app인 div 태그의 자식으로 modal이 나타난다.

2. :disabled="false"

<template>
  <button @click="show = true">Show modal</button>
  <Teleport to="body" :disabled="false">
    <Modal :show="show" @close="show = false">
      <template #header>
        <h3>custom header</h3>
      </template>
    </Modal>
  </Teleport>
</template>

False 로 설정하게 되면 id 가 app인 div 태그의 자식으로 modal이 나타난다.

true일 경우	false일 경우

id 가 app인 div 태그의 자식이거나 아예 다른 div 로 나타내는 다른 점이 있긴 하지만, Teleport를 이용하여 순간이동처럼 상위 구성 요소의 주입이 예상대로 작동하고, 하위 구성 요소가 실제 콘텐츠가 이동된 위치에 배치되게 할 수 있다는 점이다.

마치며

vue 가 아닌 react 를 이용한 js나 ts 에서는 모달을 구현하기 위해서는 항상 제일 바깥 div 태그에서 추가시켜 수동으로 관리해야하는 점이 있었지만, teleport 를 사용함에 따라 어디에든 이동시킬 수 있기 때문에 전역적으로 관리할 수 있고, 모달의 마크업이 컴포넌트 자체에서 분리될 수 있어 모달 컴포넌트는 모달의 동작과 로직에만 집중할 수 있다. 또한 , 라이프사이클을 더 세밀하게 제어할 수 있는 이점이 있어 vue 의 중요하고 아주 편리한 기능이라고 느껴진다.