서스펜스(Suspense)란?

• vue에서는 로딩중일때, 로딩완료 하였을때로 나눠 HTML을 작성한다.
• 페이지에 세 개의 로딩 스피너가 표시되고 콘텐츠가 모두 다르게 렌디링 될 수 있다.
• vue3에 나온 것으로 비동기 작업이 완료될때까지 기다릴 수 있게 해준다.(중첩된 자식 컴포넌트 API 호출이 끝날때까지 기다린다.)

<template>
  <Suspense>
    <template #default>
    <!--비동기 호출이 1개 이상있는 컴포넌트 -->
    </template>
    <template #fallback>
    <!-- 로딩중일때 보여주고 싶은 것 -->
    </template>
  </Suspense>
</template>

#default setup()에 비동기 호출이 있으면 호출이 완료될 때까지 #fallback을 보여준다. 그 다음 완료되면 #default를 보여준다.