Vue의 신기한 점 (feat. 동적 컴포넌트, 텔레포트)

[Vue 살펴보면서 신기한점] - 동적 컴포넌트(Vue 2 이상)와 텔레포트(Vue 3 이상)

• 예시 1) 탭에 여러 버튼이 있고 각 버튼은 서로 다른 컴포넌트를 보여줌
  selectedTab 데이터와 v-if를 이용해서 처리가능하지만 v-if 반복 성가심 → component 태그 이용
  • component 태그의 is 속성
  • 컴포넌트 바꿀 때 이전 컴포넌트는 DOM에서 제거됨
    → keep-alive 래퍼 컴포넌트 이용하여 컴포넌트를 완전히 제거하지 않고 상태를 내부에서 캐시로 저장하도록 Vue에 알려줌

• 예시 2) dialog 태그와 open 속성을 이용해서 만든 커스텀 오버레이 - 모달
  → HTML Semantic/접근성 관점에서 모달 컴포넌트를 컴포넌트의 depth 깊이 위치시키는 것은 좋지 않음
  전체 페이지에 오버레이되는 문제 발생 가능, 접근성/스타일링 side effect 발생 가능 ⇒ HTML root에 위치시켜야 함!
  • 텔레포트로 요소 쉽게 옮길 수 있음 (작은 최적화 방식)
  • 탤레포트는 컴포넌트의 계층을 유지하면서 DOM의 구조를 조작하고 DOM에 추가되는 부분을 제어하기 위해 사용되는 또 다른 내장 컴포넌트
  • to 속성 필요 (css selector)

teleport는 react-portal과 비슷한 것으로 보이고,
keep-alive/component는 react에서 조건 분기로 엘리먼트 처리에 대한건데 캐싱은 좋네요

 

참고) Vue 공식 스타일 가이드