Vue.Js 3 Composition API 살펴보기 - 5(Teleport)

Vue3 Composition API에 대해 알아보자

Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자.

개요

• Teleport

Teleport

• Vue 컴포넌트 설계는 비지니스 로직 계층과 표현 계층으로 구축할 수 있다. 그러나 때때로 특정한 위치에 html 렌더링을 시켜야 되는 컴포넌트가 있을 수가 있다.
  • 예를 들면, absolute, fixed, z-index를 활용하믄 모달 팝업, </body>태그앞에 와야 되는 경우
  • Vue 애플리케이션 페이지에서 작은 부분(또는 widget)에서 실행 될때, Vue app밖에 있는 DOM으로 이동하고 싶은 경우

해결

• Teleport 컴포넌트를 사용해보자. Portal이라고 불렸으나 Teleport로 변경되었다. (portal이 html태그가 될수가 있어서)
• Teleport 사용하면 DOM의 다룬 부분을 보낼 수 있는 템플릿 html를 생성 할 수 있다.
• Vue app 밖에 있는 div태그에 추가해보는 예제를 살펴보자.

/public/index.html
    ...
    <div id="app"></div>
    <div id="end-of-body"></div>
  </body>
</html>

• Vue app 내부에서 외부 #end-of-body로 텍스트를 이동시켜 보자.

<template>
  <teleport to="#end-of-body">
    This should be at the end.
  </teleport>
  <div>
    This should be at the top.
  </div>
</template>

• Teleport된 html를 보면 하단에 위치해있다. 원하는대로 잘 이동한걸 볼 수 있다.

Teleport 옵션 to 를 알아보자.

• to는 DOM 쿼리 셀럭터만 올 수 있다.

<teleport to="#some-id"> // id selector
<teleport to=".some-class"> // class selector
<teleport to="[data-modal]"> // data selector
<teleport :to="reactiveProperty"> // dynamic selector

Disabled State

• 모달 팝업 같은 경우 처음에는 보여지지 않고 실행되었을때만 보여진다. Teleport는 disabled 상태를 제공해 컴포넌트에서 숨겨져 있다가 실행될때 타겟 위치에서 보이게 조절이 가능하다.

<template>
  <teleport to="#end-of-body" :disabled="!showText">
    This should be at the end.
  </teleport>
  <div>
    This should be at the top.
  </div>
  <button @click="showText = !showText">
     Toggle showText
  </button>
</template>
<script>
export default {
  data() {
    return {
      showText: false
    };
  }
};
</script>

• showText로 초기값을 false로 할당하여 :disabled를 활성화 시켜서 보이지 않게 했다.
• 버튼을 클릭하면 Teleport가 타겟 DOM으로 가서 보여지게 된다.

• 실행되기전에는 end 구문이 맨위에 있고 버튼 누르고 작동되니 하단에 위치하는것을 볼 수 있다.
• 개발자도구로 살펴보면 DOM안에 컴텐츠가 이동하는것을 볼 수 있다.

State 자동 저장

• Teleport가 비활성화에서 활성활 될때, DOM elements는 재사용 되므로 상태를 완벽히 유지한다.
• 비디오 태그로 예제를 들면서 살펴보자.

<template>
  <teleport to="#end-of-body" :disabled="!showText">
    <video autoplay="true" loop="true" width="250">
      <source src="flower.webm" type="video/mp4">
    </video>
  </teleport>
  <div>
    This should be at the top.
  </div>
  <button @click="showText = !showText">
      Toggle showText
  </button>
</template>
<script>
export default {
  data() {
    return {
      showText: false
    };
  }
};
</script>

• 꽃이 피어오르는 동영상이 멈추거나 처음 시작 부분에서 재생하는것이 아니고 계속 상태가 유지된다.

텍스트 숨기기

• 모달을 사용하려면 처음에는 보여지지 말아야 한다. 이럴땐 v-if를 사용한다.

<template>
  <teleport to="#end-of-body" :disabled="!showText" v-if="showText">
      This should be at the end.
  </teleport>
  ...

같은 장소에 멀티 Teleport 사용하기

• 같은 장소에 2개의 Teleport를 사용할 경우에는 먼저 실행되는 Teleport를 추가하고 그다음 실행되는 Teleport는 뒤에 추가한다.

<template>
  <teleport to="#end-of-body" :disabled="!showText" v-if="showText">
    This should be at the end.
  </teleport>
  <teleport to="#end-of-body" :disabled="!showText2" v-if="showText2">
    This should be at the end too.
  </teleport>
  <div>
    This should be at the top.
  </div>
  <button @click="showText = !showText">
      Toggle showText
  </button>
  <button @click="showText2 = !showText2">
      Toggle showText2
  </button>
</template>
<script>
export default {
  data() {
    return {
      showText: false,
      showText2: false
    };
  }
};
</script>

결론

• 이 포스팅을 마지막으로 Vuejs3 Composition API는 마칩니다. 짝짝짝

참조

• teleport
• vue-mastery
• VueCompositionAPI
• vue.js