Suspense란?

<Suspense>는 자식 요소가 로드되기 전까지 화면에 대체 UI를 보여줌

<Suspense fallback={<Loading/>}>
	<Component/>
</Suspense>

즉 <Component />의 렌더링을 특정 작업 이후로 미루고, 그 작업이 끝날 때 까지는 fallback 속성으로 넘긴 컴포넌트를 대신 보여줄 수 있음

<Component/> 렌더링 전에 구체적으로 어떤 작업이 일어나야 하는 지는 Component 함수 안에 명시 되어 있을 것임

Props

• children 궁극적으로 렌더링하려는 실제 UI
  • children 의 렌더링이 지연되면, Suspense는 fallback 을 대신 렌더링함
• fallback

  • 실제 UI가 로드되기 전까지 대신 렌더링 되는 대체 UI임

    올바른 React node 형식은 무엇이든 대체 UI로 활용할 수 있지만, 실제로는 보통 로딩 스피너나 스켈레톤처럼 간단한 placeholder를 활용함

    Suspense는 children 의 렌더링이 지연되면 자동으로 fallback 으로 전환하고, 데이터가 준비되면 children 으로 다시 전환함

    만약, fallback 의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화됨

주의 사항

• React는 컴포넌트가 처음으로 마운트 되기 전에 지연된 렌더링을 하는 동안의 어떤 state도 유지하지 않음. 컴포넌트가 로드되면 React는 일시 중지된 트리를 처음부터 다시 렌더링함
• Suspense가 트리의 콘텐츠를 보여주고 있을 때 또 다시 지연되면 startTrasition 나 useDeferredValue 로 인한 업데이트가 아닌 한, fallback 이 다시 보임
• React가 다시 일시 중지되어 보이는 콘텐츠를 숨겨야 하는 경우, 콘텐츠 트리에서 Layout Effect들을 정리함. 콘텐츠가 다시 보일 준비가 디면 React는 Layout Effect들을 다시 실행함. 이로써 DOM 레이아웃을 측정하는 Effect가 콘텐츠가 숨겨져 있는 동안 동작하지 않도록 보장함

Suspense 사용 전

먼저 그동안 리액트에서 비동기 데이터를 불러와야 하는 컴포넌트는 다음과 같이 작성했을 것이다.

클래스형 컴포넌트의 경우, 생명주기 함수인 componentDidMount() 를 구현하는 것이고, 함수형 컴포넌트를 사용할 때는 useEffect() 훅(hook) 함수를 호출해서 데이터를 페칭할 것이다.

API를 호출하여 네트워크를 통해 데이터를 가져오는 처리는 컴포넌트에서 발생할 수 있는 대표적인 Side Effect이기 때문임

useEffect()를 통해 비동기 데이터를 불러오는 간단한 예시를 살펴보자