Vue 3의 새로운 기능 - Suspense

Vue 3의 새로운 기능 - Suspense

Written by Filip Rakowski

최근에 Vue 3에서 사용할 수 있는 새로운 기능에 대해 썼습니다. 여기서 Vue.js의 다음 주요 릴리스에서 기대할 수 있는 기능을 간략하게 소개했습니다.

오늘의 기사에서는 가장 흥미로운 것 중 하나인 서스펜스에 대해 조금 더 이야기하고 싶습니다.

이 기사는 활성 RFC 및 vue-next 저장소 분석을 기반으로 합니다. 이 기사에서 언급한 기능이 Vue 3에 설명된 형식으로 정확히 포함될 것이라는 보장은 없습니다(그러나 대부분 그럴 것입니다).

서스펜스란?

Suspense는 조건이 충족될 때까지 구성 요소 대신 대체 콘텐츠를 렌더링하는 특수 구성 요소입니다. 이 조건은 일반적으로 구성 요소 setup 기능에서 발생하는 비동기 작업입니다. React 생태계에서 잘 알려진 기술입니다.

무슨 말인지 몰라도 겁먹지 마세요. 이에 대해서는 곧 자세히 다루겠습니다.

Vue 3는 Composition API를 사용하여 setup 메소드를 도입할 것이며, 이를 통해 computed() 또는 onMounted()와 같은 기능을 사용하여 다양한 구성 요소 속성에 연결할 수 있습니다. setup 메소드에 의해 반환된 속성은 Vue 2 옵션 API의 data, methods 및 computed 속성을 현재 사용할 수 있는 것과 동일한 방식으로 Vue 템플릿에서 사용할 수 있습니다.

<template>
  <div> 
    Clicked <b>8</b> times. 
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const count = ref(0)
    function increment () {
      count.value++
    }    

    return { 
      count,
      increment
    }
}
</script>    

때로는 외부 API에서 데이터를 가져오는 것과 같이 setup 메서드에서 비동기 작업을 수행하고 싶을 수 있습니다(현재 created 수명 주기 후크에서 수행되는 작업과 유사합니다.

export default {
  async setup () {
    const user = await fetchUser()
    return { user }    
  }
}

이 경우 사용자 데이터를 가져올 때까지 구성 요소를 표시하고 싶지 않을 수 있습니다. 가져오는 동안 로드 표시기를 표시할 수도 있습니다. 이것이 바로 Suspense가 만들어진 이유입니다!

위의 구성 요소를 Suspense로 래핑하면 구성 요소의 비동기 작업이 해결될 때까지 fallback(대체) 콘텐츠가 표시됩니다.

<Suspense>
  <template #default>
    <UserProfile />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

아주 고급스럽죠? 여러 비동기 구성 요소에 대한 구성 요소 로드를 일시 중단할 수도 있습니다.

재미있는 고양이 이미지를 가져와 UserProfile과 함께 넣는 또 다른 구성 요소가 있는 경우 두 구성 요소가 비동기 작업을 해결할 때까지 대체 콘텐츠가 표시됩니다.

<Suspense>
  <template #default>
    <UserProfile />
    <FunnyCats /> 
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

오류 처리

지금까지 비동기 작업이 성공적으로 해결되었을 때 어떤 일이 발생하는지 살펴보았지만 실패하고 거부되면 어떻게 됩니까?

고맙게도 새로운 ErrorCaptured 수명 주기 후크를 사용하여 이와 같은 오류를 포착하고 적절한 오류 메시지를 표시할 수 있습니다. 아래 예를 살펴보십시오.

<template>
  <div v-if="error">
   
  </div>
  <Suspense v-else>
    <template #default>
      <UserProfile />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { onErrorCaptured } from 'vue'

setup() {
    const error = ref(null)
    onErrorCaptured(e => {
        error.value = e
        return true
    })
    return { error }
}
</script>

위의 예에서는 UserProfile의 비동기 작업이 해결될 때까지 대체 콘텐츠를 표시합니다. 무언가 잘못되어 거부되면 onErrorCaptured Vue 후크를 사용하여 오류를 캡처하고 이를 error 속성에 전달하고 대체 콘텐츠 대신 템플릿에 표시합니다.

요약

Suspense는 비동기 작업이 수행될 때까지 대체 콘텐츠를 쉽고 우아하게 표시할 수 있는 매우 편리한 구성 요소입니다. ErrorCaptured 수명 주기 후크를 사용하면 일시 중단된 구성 요소에서 발생한 오류를 정상적으로 처리할 수도 있습니다.