[ VueJS 프로그래밍 ] teleport 태그 사용 방법 및 Dom 이동

VueJS 라이브러리에서 유연한 객체 렌더링을 위한 가상 Dom 이동 기능을 제공한다. 이를 사용하면 이미 어떤 데이터가 출력되어야 할 공간에 추가적으로 특정 객체를 집어 넣을 수 있다.

이 때 Dom 상속 등 순위 관계를 지키지 않더라도 해당 객체가 이동되어 유연하게 처리되는 듯 싶다.

사용 예시는 다음과 같다.

teleport 를 사용하면 어떤 위치에 있더라도 to 내에 있는 CSS선택자에 해당하는 Dom 위치로 이동된다.

즉 위 상황에서 template 내부 Vue 이지만, 해당 body가 존재하는 영역으로 이동된다.

<body> <div id="app" data-v-app=""> <span data-v-0904fc8e="" class="test"> aaa </span> <span data-v-0904fc8e="" class="test2">  MessageTest </span> </div> <script type="module" src="/src/main.js?t=1749467484494"></script> <div data-v-0904fc8e="" class="inner"> 텔레포트 </div> </body>

텔레포트된 위치는 결과적으로 body 하위에 존재하는 것을 확인할 수 있다.

즉 추가적으로 렌더링하는 Dom 등에 대해서 반드시 특정 위치에서 태그로 로드할 필요 없이 필요에 따라 유연하게 적용할 수 있는 시스템을 제공한다. 이는 툴바, 네비게이션 등에 동적으로 추후 무언가를 추가해야할 때 상태 변수를 따로 관리할 필요 없이 특정 속성안에 유연하게 추가 및 관리할 수 있다.

특히 해당 컴포넌트의 scope 에 해당하는 style 은 텔레포트 되어도 그대로 적용된다.

위 코드는 텔레포트라는 글자를 감싸는 inner class를 포함하는 div 를 body로 teleport 한다.

이 상황에서 .inner 에 대해 style scoped 모드로 스타일을 등록하면, 텔레포트가 body로 되더라도, 즉 해당 컴포넌트 범위를 벗어난 공간에 텔레포트 되더라도 해당 컴포넌트의 div로 인식되어 inner 의 스타일이 그대로 유지된다.

다만 텔레포트 밖에 있는 부모 Dom의 클래스 지정자에 해당하는 스타일은 텔레포트되는 경우 효력을 잃기때문에 유의해야 한다. 위 상황에서 텔레포트 노드의 부모는 test2 스타일을 상속받는데, 이 test2 스타일은 텔레포트되는 경우 대상 Dom에는 적용되지 않는다. 즉 텔레포트 하위에 존재하는 스타일 지정자만 다른 Dom에 이식된다.