React의 Suspense, ErrorBoundary

Suspense

<Suspense>가 감싼 내부 컴포넌트 등이 로딩되는 동안 fallback(대체물)을 표시한다.

 

아래와 같은 상황에서 사용할 수 있다.

• 콘텐츠의 로딩시간이 필요할 때
• 콘텐츠를 한 번에 공개하고 싶을 때
• 전환이 일어나고 있음을 나타내고 싶을 때

더 많은 상황을 알고 싶다면... > 공식문서 참고

<Suspense fallback={<Loading />}> //로딩 시 대체내용
  <ChildrenComponent /> //로딩내용
</Suspense>

작동원리는 아래와 같다.

ChildrenComponent가 Promise를 던지면, Suspense가 이를 catch하고,

Promise가 pending(보류중) 상태이면 LoadingFallback을 return하고, settled(fulfilled, rejected)(완료된(성공, 실패))이면 ChildrenComponent을 return 한다.

 

* 하지만 무분별한 Suspense사용은 안된다. Suspense 내에서 2개 이상의 요청을 한다면 병목현상이 발생하여 요청 간의 waterfall현상이 발생한다.

 

 

ErrorBoundary

ChildrenComponent의 Promise가 rejected(실패한)상태라면 로딩 후에 실패로 처리된다.

따라서 프로그램이 정상적으로 표시되지 않는다. 

<ErrorBoundary>를 사용하여 에러를 정상적으로 처리할 수 있다.

Suspense와 마찬가지로 에러처리가 필요한 ChildrenComponent를 감싸고 처리할 내용을 fallbackRender속성에 작성한다.

<ErrorBoundary fallbackRender={<Loading />}> //에러 시 대체내용
  <ChildrenComponent /> //로딩내용
</ErrorBoundary>

 

 

 

참고

https://velog.io/@seungchan__y/Suspense-%EB%8F%84%EC%9E%85%EA%B3%BC-Waterfall-%ED%98%84%EC%83%81-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

https://happysisyphe.tistory.com/54

https://react.dev/reference/react/Suspense