React Suspense
React 18에서 도입된 Suspense는 비동기 데이터 로딩을 처리할 수 있는 강력한 기능입니다. 복잡한 상태 관리 없이도 로딩 상태를 선언적으로 관리할 수 있어요.
왜 Suspense를 사용해야 할까요?
기존의 비동기 데이터 처리 방식:
function MyComponent() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);
useEffect(() => {
setLoading(true);
fetchData()
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, []);
if (loading) return <LoadingSpinner />;
if (error) return <ErrorMessage error={error} />;
return <DataDisplay data={data} />;
}
Suspense를 사용한 방식:
function App() {
return (
<ErrorBoundary fallback={<ErrorMessage />}>
<Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</Suspense>
</ErrorBoundary>
);
}
function MyComponent() {
const data = useSuspenseData(); // Promise를 throw하는 hook
return <DataDisplay data={data} />; // 성공한 경우만 고려!
}
핵심 개념들
1. Promise Throwing
Suspense는 컴포넌트에서 Promise가 throw될 때 이를 catch하여 fallback UI를 보여줍니다.
2. ErrorBoundary와의 조합
- Suspense: 로딩 상태 처리
- ErrorBoundary: 에러 상태 처리
3. 중첩된 Suspense
세밀한 로딩 상태 제어가 가능합니다.
예제
Suspense를 활용한 예제
실무에서의 활용 팁
1. 데이터 로딩 최적화
// 좋은 예: 세밀한 Suspense 경계
<Suspense fallback={<UserProfileSkeleton />}>
<UserProfile />
<Suspense fallback={<PostListSkeleton />}>
<PostList />
</Suspense>
</Suspense>
2. 에러 처리 전략
<ErrorBoundary fallback={<ErrorPage />}>
<Suspense fallback={<PageSkeleton />}>
<App />
</Suspense>
</ErrorBoundary>
3. 점진적 로딩
사용자 경험을 위해 중요한 컨텐츠부터 단계적으로 로딩하세요.