vue3 teleport 사용법
사용하는 이유
vue를 세팅하면 index.html의 div id = app 에 모든 화면을 집어넣습니다. 그 이후 생성되는 모든 로직은 다 <div id="app" /> 에 들어가게 됩니다. 하지만 특정한 요소의 html 의 경우 다른 위치에서 렌더링되어야 하는 경우가 있습니다.
예를 들면 아래와 같은 경우가 있습니다.
- Styles that require fixed or absolute positioning and z-index. For example, it’s a common pattern to place UI components (like modals) right before the </body> tag to ensure they are properly placed in front of all other parts of the webpage.
- 고정 또는 절대 위치 지정과 Z-인덱스가 필요한 스타일.예를 들어, 모달과 같은 UI 구성요소를 </body> 태그 바로 앞에 배치하여 웹페이지의 다른 모든 부분 앞에 올바르게 배치되도록 하는 것이 일반적인 패턴입니다.
- When our Vue application is running on a small part of our webpage (or a widget), sometimes we may want to move components to other locations in the DOM outside of our Vue app.
- Vue 애플리케이션이 웹페이지(또는 위젯)의 작은 부분에서 실행될 때 때때로 Vue 앱 외부 DOM의 다른 위치로 구성 요소를 이동하고 싶을 수 있습니다.
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 이곳에 vue로 만드는 모든 화면이 들어갑니다. -->
</div>
</body>
</html>teleport란?
텔레포트는 index.html에 div id=app과 같은 레벨에 별도의 div를 만드는 것임.
<teleport to="#end-of-body"> 와 같이 to 로 확인된 destination 에 teleport 안에 포함된 component 가 들어가게 된다.
/public/index.html
...
<div id="app"></div>
<div id="end-of-body"></div>
</body>
</html>
/src/App.vue
<template>
<teleport to="#end-of-body">
This should be at the end.
</teleport>
<div>
This should be at the top.
</div>
</template>Teleport Options for To
Our to attribute simply needs to be a valid DOM query selector.
to 속성은 유효한 DOM query selector여야 합니다.
ID selector
<teleport to="#end-of-body">
Class selector
<teleport to=".someClass">
Data selector
<teleport to="[data-modal]"><div data-model></div>
Dynamic selector
<teleport :to="reactiveProperty">Disabled State
teleport has a disabled state where the content stays inside the original component. It’s not until teleport is enabled that it will be moved to the target positioning.
텔레포트에는 콘텐츠가 원래 구성 요소 내부에 유지되는 비활성화 상태가 있습니다. 텔레포트가 활성화될 때까지는 대상 위치로 이동되지 않습니다.
<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>
Automatically Saving the State
When teleport goes from disabled to enabled, the DOM elements are re-used, so they completely retain the existing state.
텔레포트가 비활성화에서 활성화로 전환되면 DOM 요소가 재사용되므로 기존 상태를 완전히 유지합니다.
<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>
Hiding the Text
If the content we had inside teleport was a modal, we probably wouldn’t want to show it until it was active.
텔레포트 내부에 있는 콘텐츠가 모달이라면 아마 active 될때 까지는 표시하고 싶지 않을 것입니다.
Multiple Teleports into the Same Place
<template>
<teleport to="#end-of-body" :disabled="!showText" vif="showText">
This should be at the end.
</teleport>
<teleport to="#end-of-body" :disabled="!showText2" vif="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>
https://github.com/vuejs/rfcs/blob/rfc-portals/active-rfcs/0025-teleport.md
'Java Scripts > Vue.js' 카테고리의 다른 글
| Vuex - Mutation & Action - 1 (0) | 2022.04.18 |
|---|---|
| Vue MultiSelect (0) | 2022.04.09 |
| Vue : Error Handling and 404s (0) | 2022.01.16 |
| Vue - Progress Bar : Axios Interceptors (0) | 2022.01.12 |
| Vue : API calls with Axios (0) | 2022.01.08 |
