[Vue] Teleport 컴포넌트

• Vue로 popup을 개발하는 도중 Vue 내부에서 제공하는 컴포넌트인 Teleport 에 대해서 알게 되었고, 팝업과 유사한 역할을 하기에 이를 사욯하고 정리해보았다.

Teleport

• 로그인, 결제, 모달, 팝업 등 현재 보고있는 화면에서 최상위로 올라와 작업하는 경우가 있다.
• 일반적으로는 전체 화면 모달, 알림 등이 있지만, 모달과 그 안에 있는 버튼 등 DOM 계층 구조 안에 CSS, 각 컴포넌트별 연관 과정 등이 존재하여 복잡해진다.
• 그래서 이 부분을 해결하고자 나온 컴포넌트이다.
• 요약해서 말하자면 <Teleport> 컴포넌트는 외부의 DOM 노드로 이동 할 수 있게 해주는 역할을 한다.

Teleport 모습

• 나의 경우를 살펴보면 예를 들어 필터 버튼을 만든다고하면 그 버튼 하단에 팝업 형태로 어떤 구성이 있는지 보여주려 하였다.
• 로직까지 작성하진 않으나 요소적으로 어느 형태를 가져가는지 보면 좋을 것같다.

[ Parent.vue ]

<div>
  <Filter
    v-for="(popup, index) in popupList"
    :key="index"
    :index="index"
    :popup-data="popup"
  />
</div>

[ Filter.vue ]

<div :id="`toggle-filter-${popupData.id}`" ref="filterRef" :key="popupData.id">
  <button
  >
  <!-- 버튼 관련 로직 및 형태 -->
  </button>
</div>
<Transition name="fade">
  <Teleport v-if="togglePopup" :to="`#toggle-filter-${popupData.id}`">
    <!-- 팝업 내용 -->
  </Teleport>
</Transition>

• 부모에서 필터링 버튼들에 대한 정보를 바탕으로 v-for순회를 하여 나열된 형태를 만든다.
• Filter 컴포넌트 내에 버튼이 존재하고, 클릭했을 때 Teleport 컴포넌트를 활용하여 팝업 형태로 구성한 내용을 작성하고 그에 따른 로직이 진행되도록 만들어준다

Teleport 속성

• to

  <Teleport v-if="togglePopup" :to="`#toggle-filter-${popupData.id}`">
    <!-- 팝업 내용 -->
  </Teleport>

  • to의 대상은 CSS셀렉터 문자열 또는 실제 DOM 노드여야 한다.
  • 지금의 경우는 동적으로 바인딩된 상태이며 toggle-filter-${팝업의 id}를 id 어트리뷰트를 가지고 있는 요소로 이동한다.

• disabled

  <Teleport :disabled="state">
    ...
  </Teleport>

  • state변수 등, Teleport 상태를 동적으로 업데이트가 가능하다