Vue: Suspense 컴포넌트

혹시 리액트의 <Suspense> 컴포넌트로 알고 들어왔는가?
훠이~ 훠이~

오늘은 Vue 에서 새로 생길 내장 컴포넌트 <Suspense> 에 대해 알아보도록 한다.
아직 Vue의 이 컴포넌트는 실험 단계이며, 변경 가능성이 있지만,
리액트의 <Suspense> 컴포넌트와 비슷하다.
따라했다고 해도 무방하다.
이거 말고도 Vue가 리액트 따라한 거 있고 반대로 리액트가 뷰 따라한 것도 있으니
서로 기분나쁘다고 아래와 같은 포스터 찍는 일은 없기 바란다.

컴포넌트 본문 변경점

setup() 함수는 async 못 붙인다. 지원을 안했기 때문이다.
하지만 <suspense> 컴포넌트와 함께 사용한다면, 지원할 수 있게 된다.

export default defineComponent({
  async setup() {
    const { data } = await fetchData();
    return { data };
  }
});

그런 다음, 갖다 붙이면 된다.

<Suspense>
  <!-- 아까 async setup 선언한 컴포넌트 -->
  <MyAsyncComponent />

  <!-- #fallback 슬롯에다가 불러오기 전 내용을 정의할 수 있다. -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

간단하다. 감격스럽다.

하지만 안타깝게도 리액트의 <suspense> 컴포넌트처럼 오류 처리가 내장되어 있지 않는다는 게 아쉬운 점이 되겠다. 분명 Vue 시스템이라면 가능할텐데 라는 생각도 들겠지만... 대신 Vue 에서는 상태 관리 중 오류 상태 관리를 지원하는데, 바로, onErrorCaptured 되시겠다.
이 상태관리 함수는 현재 컴포넌트에서 발생하는 대부분의 오류를 캐치하여 오류를 대응할 수 있는 이벤트를 제공한다. 따라서 여기서 잡을 수밖에 없다는 것.
물론 이걸 Wrapping 해서 오류까지 대응한 <suspense> 컴포넌트를 만들 수 있기는 하다. 리액트로 그런 식으로 해결하니.

비동기 컴포넌트와의 차이점?

Vue의 비동기 컴포넌트는 그렇게 거창하지 않다. 그냥 평소에 컴포넌트 안불러오다가 필요하기 되면 그때 꺼내다 쓰는 그런 컴포넌트라는 것이다.
즉, 불러올 컴포넌트 자체가 비동기든 말든 그건 관심 없고, 그저 필요할 때 가져오는 컴포넌트 그 이상, 그 이하도 아니라는 것.
따라서 불러올 컴포넌트의 내용은 기존과 동일하게 작성하면 된다. 정말이라니까.
하지만 <suspense> 컴포넌트와 함께한 컴포넌트는 진정한 비동기 컴포넌트를 만들 수 있다는 차이점이 있다는 감격스러운 기능이 아닐 수 없다는 정말 눈물없이 볼 수 없는 Vue의 비동기 처리에 진심을 볼 수 있다고 하겠다.

주의

당연하겠지만, 아직 실험적 단계라는 점에 주의하라.
작년부터 나오긴 했는데 1년 지난 걸 보니 해결할 게 산더미인가 보다.
당장에 컴포넌트 자체보단 async setup() 부터가 골칫거리일 테니.
안정성은 보증할 수 없으니, 실무에서 작성할 때 아직까지는 기존 비동기 처리를 단 컴포넌트를 작성하기 바란다.
당연히 공식 탑재 기능이 아니기 때문에 Vue Router 같이 요청 경로에 따라 외부 컴포넌트 붙이는 라이브러리 등에서는 공식적으로 지원할 리가 없다.
물론 그냥 컴포넌트 붙이고 그 컴포넌트 안에 <suspense> 쓰는 건 가능하니 걱정하지는 말도록. 즉, 직접 지원은 안하고, 공식 탑재가 된다 해도 Vue Router 에게는 뜨거운 감자라고 할 수밖에 없다.

끗.