Suspense 제대로 쓰기 – 데이터 로딩 UX와 코드 스플리팅 동시 개선

 

 

안녕하세요 😊
Suspense는 로딩 중 상태를 선언적으로 처리할 수 있도록 도와주는 React 기능입니다.
두 가지 핵심 사용처는 ① 코드 스플리팅(React.lazy) ② 데이터 로딩 경계 처리입니다.

1) 코드 스플리팅 기본

 

import React, { Suspense } from "react";
const Chart = React.lazy(() => import("./Chart"));

export default function Dashboard(){
  return (
    <Suspense fallback={<p>차트 로딩 중…</p>}>
      <Chart/>
    </Suspense>
  );
}

2) 데이터 로딩용 리소스 패턴(기초)

간단 예시: Promise가 해결될 때까지 읽기를 “멈추는” 래퍼를 만들어 Suspense로 감쌉니다.

// resource.js
export function createResource(promise){
  let status="pending", result;
  const suspender = promise.then(
    r=>{ status="success"; result=r; },
    e=>{ status="error"; result=e; }
  );
  return {
    read(){
      if(status==="pending") throw suspender;
      if(status==="error") throw result;
      return result;
    }
  };
}

 

// App.jsx
import React, { Suspense } from "react";
import { createResource } from "./resource";
const userResource = createResource(fetch("/api/user").then(r=>r.json()));

function User(){
  const user = userResource.read(); // 로딩이면 Promise throw → Suspense fallback
  return <div>{user.name}</div>;
}

export default function App(){
  return (
    <Suspense fallback={<p>사용자 정보를 불러오는 중…</p>}>
      <User/>
    </Suspense>
  );
}

3) 에러 경계(ErrorBoundary)와 함께

데이터 에러를 잡을 땐 ErrorBoundary를 곁들입니다.

 

function ErrorBoundary({children}){
  return (
    <React.ErrorBoundary fallbackRender={({error}) => <p>에러: {error.message}</p>}>
      {children}
    </React.ErrorBoundary>
  );
}

4) 실무 팁

• 컴포넌트 단위로 Suspense 경계를 잘게 나누면 일부만 로딩/오류여도 나머지는 정상 표시됩니다.
• 데이터 라이브러리(예: React Query, SWR)의 Suspense 모드를 활용하면 위 “리소스 패턴”을 직접 구현하지 않아도 됩니다.
• 너무 많은 lazy() 분할은 오히려 네트워크 요청 수를 늘려 초기 속도를 해칠 수 있습니다. 적절한 청크 단위를 설계하세요.