What is Suspense?
<Suspense>는 childiren이 로딩중일 때 fallback을 보여주게 하는 컴포넌트이다.
로딩 중일 때는 보통 REST API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 작업이 처리된다.
Why use?
이전에는 데이터 로딩을 state로 직접 구현하거나 데이터 로딩 상태를 제공하는 라이브러리에 의존하는 경우가 많았다. 이 경우에 나타나는 문제점은 대표적으로 아래 3가지가 있다.
1. Waterfall 현상
로딩 → 렌더링 → 로딩 → 렌더링 순서가 부모에서 자식에게로 계속 이어진다면 데이터 로딩이 한번에 이뤄지지 않는 waterfall 현상이 나타난다.
2. race conditions에 취약
비동기 통신은 반드시 요청 순서대로 데이터가 응답된다는 보장이 없기 대문에 싱크가 맞지 않은 데이터를 제공할 수 있다.
3. 선언적 코드
if문을 사용하여 로딩 중인 UI를 보여주는 것은 명령형 코드에 가까워 선언적 코드를 지향하는 React의 기본 방향성과 맞지 않다. 데이터 로딩과 UI 렌더링이라는 전혀 다른 목표가 하나의 컴포넌트 안에 coupling 되어 코드가 읽기 어려워지고 테스트를 작성하기도 힘들어진다.
Getting Started
<Suspense fallback={<Loading/>}>
<Children/>
</Suspense>리액트는 Children에 필요한 모든 코드와 데이터들이 로딩될때까지 Loading fallback을 나타낸다.
Note
suspense-enabled데이터 소스만이 Suspense 컴포넌트를 활성화시킨다.- Relay, Next.js처럼 Suspense-enabled 프레임워크로 데이터 fetching 하는 경우
- lazy로 컴포넌트를 Lazy-loading 하는 경우
- React Query의 suspense 옵션을 적용하여 Suspense를 활성화할 수 있다.
Reference
Software Engineer 🍊