하수도키의 성장일기

개발일기/Vue.js

[Vue.js] Portal-Vue 라이브러리 사용하기

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공합니다. 위에 문구는 리액트 홈페이지에서 나온 Portals에 대한 설명이다. Vue2에서는 현재 제공하지 않아 Portal-Vue 라는 라이브러리를 사용한다. https://portal-vue.linusb.org/guide/getting-started.html#what-is-portalvue Vue3에서는 Portal(Teleport) 을 지원한다!! hasudoki.tistory.com/entry/VueJs-3-Composition-API-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-5Teleport?category=1064875 Vue.Js 3 Composition ..

개발일기/Vue.js

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

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Teleport Teleport Vue 컴포넌트 설계는 비지니스 로직 계층과 표현 계층으로 구축할 수 있다. 그러나 때때로 특정한 위치에 html 렌더링을 시켜야 되는 컴포넌트가 있을 수가 있다. 예를 들면, absolute, fixed, z-index를 활용하믄 모달 팝업, 태그앞에 와야 되는 경우 Vue 애플리케이션 페이지에서 작은 부분(또는 widget)에서 실행 될때, Vue app밖에 있는 DOM으로 이동하고 싶은 경우 해결 Teleport 컴포넌트를 사용해보자. Portal이라고 불렸으나 Teleport..