Skip to Content
문서@suspensive/react시작하기

시작하기

Suspensive로 3분 만에 비동기 안전한 React 페이지를 만들어 보세요.

패키지 설치

npm install @suspensive/react

ErrorBoundary와 Suspense로 앱 감싸기

수동 로딩/에러 상태 체크를 선언적 바운더리로 대체하세요:

import { ErrorBoundary, Suspense } from '@suspensive/react'
 
function App() {
  return (
    <ErrorBoundary
      fallback={({ error, reset }) => (
        <div>
          <p>Something went wrong: {error.message}</p>
          <button onClick={reset}>Try again</button>
        </div>
      )}
    >
      <Suspense fallback={<div>Loading...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  )
}

clientOnly로 SSR 안전성 확보

Next.js 또는 다른 SSR 프레임워크를 사용하고 있다면, 하이드레이션 문제를 방지하세요:

import { Suspense } from '@suspensive/react'
 
function Page() {
  return (
    <Suspense fallback={<Skeleton />} clientOnly>
      <UserProfile />
    </Suspense>
  )
}

ErrorBoundaryGroup으로 에러 바운더리 일괄 리셋

prop drilling 없이 여러 에러 바운더리를 한 번에 리셋하세요:

import { ErrorBoundary, ErrorBoundaryGroup } from '@suspensive/react'
 
function Dashboard() {
  return (
    <ErrorBoundaryGroup>
      <ErrorBoundaryGroup.Consumer>
        {({ reset }) => <button onClick={reset}>Reset All</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={<UserError />}>
        <UserSection />
      </ErrorBoundary>
      <ErrorBoundary fallback={<StatsError />}>
        <StatsSection />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  )
}

다음 단계

수정된 날짜:
설치하기Suspensive vs react-error-boundary