1. Vue 3의 Suspense, 왜 필요할까요?
개발하다 보면 비동기 컴포넌트를 사용할 일이 종종 생깁니다. 그런데 이게 로딩되기 전까지 화면에 뭔가 안 뜨면 사용자 입장에선 불편하잖아요. 그럴 때 유용하게 쓸 수 있는 게 바로 Vue 3의 Suspense 기능입니다.
간단히 말하면, 컴포넌트가 준비되기 전까지 임시로 보여줄 화면을 설정할 수 있는 도구예요.
<Suspense>는 두 개의 슬롯을 활용하는데요:
default에는 실제 보여줄 비동기 컴포넌트를,fallback에는 로딩 중일 때 대신 보여줄 내용을 넣으면 됩니다.
컴포넌트가 준비되면 자동으로 바뀌기 때문에, 로딩 상태를 일일이 관리하지 않아도 됩니다.
예시 코드:
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>잠시만 기다려주세요...</div>
</template>
</Suspense>
</template>2. Vue 3에서 템플릿 루트 요소는 더 이상 하나일 필요가 없다?
Vue 2를 써보셨다면 아시겠지만, 템플릿 안에 항상 <div> 같은 루트 요소 하나로 전체를 감싸야 했어요. 이게 은근 불편했죠.
Vue 3에서는 이런 제약이 사라졌습니다. Fragment 기능이 생기면서, 템플릿에 여러 개의 최상위 요소를 나란히 놓는 게 가능해졌어요.
예를 들면 이런 식이죠:
<template>
<header>상단</header>
<main>내용</main>
<footer>하단</footer>
</template>더 이상 의미 없는 <div>로 감싸지 않아도 되니까, 코드가 훨씬 깔끔해져요.
3. Suspense와 루트 요소가 만났을 때
<Suspense> 안쪽에서도 이 프래그먼트 기능이 그대로 적용됩니다. 기본 슬롯 안에서는 여러 루트 요소를 써도 전혀 문제 없어요.
다만, fallback 슬롯은 가독성을 위해 하나의 태그로 감싸주는 걸 권장합니다. 나중에 유지보수하거나 구조 파악할 때 더 깔끔하니까요.
마무리하며
- Suspense는 비동기 컴포넌트의 로딩 상태를 자연스럽게 처리할 수 있게 해줍니다.
- 템플릿 구조는 Vue 3에서 훨씬 유연해져서, 여러 루트 요소도 O
- 이 두 가지 기능을 함께 잘 활용하면, 사용자에게 더 부드럽고 깔끔한 화면을 제공할 수 있습니다.
