내장 컴포넌트 | UXKM Guidebook

Vue 내장 컴포넌트

Transition, KeepAlive, Teleport와 Suspense를 UI에 적용할 때의 기준을 정리합니다.

Transition과 TransitionGroup

Transition은 element나 component 하나의 진입·이탈 상태를, TransitionGroup은 keyed 목록의 변경을 연결합니다. prefers-reduced-motion 사용자는 과도한 이동 없이 상태 변화를 이해할 수 있어야 합니다.

동적 component를 전환할 때 instance state를 보존해야 하면 KeepAlive를 사용합니다. 보존된 화면이 다시 활성화될 때 stale data와 focus 위치를 점검합니다.

modal, popover처럼 stacking context에서 분리할 UI는 Teleport로 body 아래에 렌더링할 수 있습니다. DOM 위치가 바뀌어도 trigger와 dialog의 접근성 관계, focus 복귀와 scroll lock은 유지해야 합니다.

vue<Teleport to="body">
  <Modal v-model:open="open" title="삭제 확인">
    선택한 항목을 삭제할까요?
  </Modal>
</Teleport>

비동기 dependency가 있는 component tree의 pending·resolved 상태를 조정합니다. production 적용 전 현재 Vue version의 지원 상태를 확인하고, Skeleton이나 Spin으로 loading 상태를 명시합니다.