Suspense & lazy

Suspense : React Component 내부에서 비동기적으로 다른 요소를 불러올 때 해당 요소가 불러와질 때까지 Component의 렌더링을 잠시 멈추는 용도로 사용할 수 있는 컴포넌트

lazy : 코드 분할을 구현하는 방법으로, 컴포넌트를 동적으로 불러올 수 있게 해주는 함수

• 동적 임포트 : 컴포넌트를 처음부터 로드하지 않고 필요한 시점에 불러와서 초기 번들 크기를 줄여 첫 로딩 시간을 개선한다.

lazy를 사용해서 컴포넌트를 비동기적으로 불러오게끔 구성하고, Suspense를 사용해서 비동기 작업이 완료될 때까지 Suspense의 fallback Prop을 통해 로딩 UI를 화면에 보여준다.

💡 Suspense와 Lazy를 사용한 "동적으로 컴포넌트 불러오기"는 Router와 함께 Code Splitting에 주로 사용된다.

Error Boundary

에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 fallback UI를 보여주는 React 컴포넌트

• react-error-boundary

React Query와 함께 Suspense, Error Boundary 사용하기

React Query에서는 비동기 데이터 요청 시 Suspense와 Error Boundary를 활용할 수 있는 옵션을 제공한다.

참고

카카오페이-React Query와 함께 Concurrent UI Pattern을 도입하는 방법