Vue3 Suspense + Skeleton UI 알아보기

회사 프로젝트에서 비동키 컴포넌트를 사용하는 일이 많았습니다. 이전에는 Loading Component만을 이용해서 비동기 상태를 처리했지만 이는 어딜가도 로딩 컴포넌트가 반복되는 불편한 상황으로 이어졌습니다. 이를 개선하고자 Vue3의 Suspense 기능을 사용하여 SkeletonUI를 도입했습니다.

Suspense란?

<Suspense> 는 컴포넌트 트리에서 비동기 의존성을 조정하기 위한 내장 컴포넌트입니다. 컴포넌트 트리 아래에 여러개의 중첩된 비동기 의존성이 해결될 때까지 기다리는 동안 로드 상태를 렌더링할 수 있습니다.

사실 Suspense 기능은 React, Next 개발자라면 한번쯤은 사용했을 기능입니다. React18부터 지원을 시작했기 때문에 상당히 많은 프로젝트에서 적용하고 있는 기능이기 때문입니다. 하지만 Vue는 아직 실험적인 기능이라고 명시되어 있어 Vue도 빨리 Suspense 기능을 완성시켜줬으면 하는 바램입니다...

리액트의 Suspense, Vue3의 Suspense 모두 큰 차이가 없습니다. 두 라이브러리 모두 fallback이라는 키워드를 사용하여 비동기 컴포넌트가 로딩되기 전에 보여줄 컴포넌트를 사전에 미리 만들어두는 것입니다.

React

import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

Vue

<Suspense>
 <!-- 메인 컨텐츠 -->
  <component :is="Component"></component>
    <!-- 로딩 상태 -->
 <template #fallback>
   로딩중...
 </template>
</Suspense>

공식문서에 나와있는 기본적인 사용법은 위와 같습니다. Reac는 fallback 컴포넌트를 Props로 던지지만 Vue는 Slot 기능을 이용하여 Fallback 컴포넌트를 직접 넣습니다.
기능만 봐서는 사실 별게 없습니다. 비동기가 처리되기 전 컴포넌트를 사전에 보여질 UI를 정의해놓는다. 가 Suspense 기능의 전부이기 때문입니다. 단순하게 로딩기능만 넣는다면, 그냥 전체 로딩 컴포넌트를 두는것과 별 차이가 없지만 Suspense의 장점은 Skeleton UI에 있습니다

Skeleton UI

비동기로 데이터 패칭 후 로딩 상황 속에서 실제 데이터가 렌더링 될 화면의 윤곽을 보여주는 애니메이션 UI

Skeleton UI를 사용하여 비동기 컴포넌트에 모두 적용을 해준다면 사용자UX가 크게 개선될 수 있습니다

//Skeleton.vue
<template>
  <div class="container">
   <div class="cover_img">
  </div>
   <div class="info_container">
     <div class="title"></div>
     <div class="subtitle"></div>
      <br/>
      <div class="author"></div>
   </div>
  </div>
</template>

<style>
.container {
  display: flex;
  gap: 15px;
  padding: 20px 10px;
  border-bottom: 1px solid rgb(220, 220, 220);
  color: black;
  text-decoration: none;
}

.cover_img {
  width: 80px;
  height: 105px;
  background-color: rgb(230, 230, 230);
}
.info_container {
  flex: 1;
}

.title,
.subtitle,
.author {
  width: 100%;
  height: 20px;
  background-color: rgb(230, 230, 230);
}
</style>

<template>
<Suspense>
	<component :is="BookItem" />
	<template #fallback>
    	<Skeleton />
    </template>
</Suspense>
</template>

위와 같은 형태로 비동기가 처리되지 않았음에도 컴포넌트가 보여지며 사용자가 빈화면을 보는 시간이 감소하게 됩니다.

마치며

오늘은 Vue, React의 Suspense기능을 정리해보았습니다. React가 Vue보다 먼저 도입한만큼 Vue가 React를 잘 모방했다는 생각이 듭니다. 각 두 라이브러리들이 서로 경쟁하며 좋은 기능을 같이 만들어나갔으면 좋겠습니다.