minstudio

로딩과 에러의 선언적 처리: Suspense와 Error Boundary

로딩과 에러의 선언적 처리: Suspense & ErrorBoundary

기존에는 컴포넌트 내부에서 if (isLoading) return <Spinner /> 방식으로 로딩을 처리했습니다. React 18부터는 Suspense를 통해 부모 컴포넌트에서 비동기 로딩 UI를 선언적으로 위임받아 처리할 수 있습니다. 또한 Error Boundary를 활용하면 하위 컴포넌트의 에러가 앱 전체를 무너뜨리지 않도록 방어할 수 있습니다.

⚡ 선언적 UI 구조

💡 팁: TanStack Query와 궁합이 좋습니다

React Query 등에서 suspense: true 옵션을 켜면 데이터 패칭 로직과 UI 로딩 처리를 완전히 분리할 수 있습니다.

<div class="app-container">
  <h3>사용자 프로필 로딩 시뮬레이터</h3>
  <div class="toolbar">
    <button id="btnLoad" class="btn btn-blue">프로필 불러오기</button>
    <button id="btnError" class="btn btn-red">에러 발생시키기</button>
  </div>
  
  <div id="render-area" class="card-area">
    <div class="placeholder">버튼을 눌러주세요</div>
  </div>
</div>

🔒 localhost:8000/preview

로딩과 에러의 선언적 처리: Suspense와 Error Boundary | Minstudio