AsyncBoundary
비동기 Suspense
컴포넌트의 로딩 상태와 Error
상태를 동시에 처리하는 컴포넌트입니다.
ref
가 제공하는 reset()
함수로 Error
상태를 초기화할 수 있습니다.
Examples
const ref = useRef<{ reset: () => void }>();
<AsyncBoundary
ref={ref}
// 로딩 중일 때 (Suspense 상태가 발생했을 때) 렌더할 컴포넌트
pendingFallback={<div>로딩 중입니다.</div>}
// 에러가 발생했을 때 렌더할 컴포넌트. 첫 번째 인자로는 발생한 에러가 전달됩니다.
rejectedFallback={error => <div>에러가 발생했습니다. {error.message}</div>}
>
<Suspense_일으키는_컴포넌트 />
</AsyncBoundary>;
// AsyncBoundary가 catch한 에러를 clear하기
ref.current?.reset();
References
https://jbee.io/react/error-declarative-handling-1/ 선언적으로 로딩과 에러 상태 처리하기 https://toss.im/slash-21/sessions/3-1 Suspense와 에러 처리 관련된 Slash 21 발표