[React] React Suspense이란?

React.Suspense란?

Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다.

 

기본적으로 리액트는 JSX 코드 안에 들어있는 모든 컴포넌트를 즉시 호출하여 바로 랜더링을 진행한다.
예를 들어, 리액트는 다음과 같이 <Event /> 컴포넌트가 포함된 JSX 코드를 렌더링할 때, Event 함수를 바로 호출한다.

<Event />

그러나 아래처럼 Suspense로 감싸주면 컴포넌트의 랜더링을 특정 작업 이후로 미루고, 그 작업이 끝날 때 까지는 fallback 속성으로 넘긴 컴포넌트를 대신 보여줄 수 있다.

<Suspense fallback={<Skeleton />}>
  <Event />
</Suspense>

 

✅ useState를 통한 Loading

이전까지는 늘 이렇게 비동기 작업을 수행하기 이전에 loading이라는 상태값을 변경하여 UI를 띄워왔었다.

const fetchData = useCallback(async () => {
  try {
    setLoading(true)
    const data = await callback()
    setState(data)
  } catch (error) {
    throw new Error(err)
    setLoading(false)
  }
}, [setLoading, callback, setState])

 

✅ Suspense를 통한 Loading

비동기로 작업되는 컴포넌트를 Suspense로 감싸고, 로딩 때 보여줄 화면을 fallback 속성으로 전달한다.
로딩화면을 생성하기 위한 useState와 같은 hook들이 생성될 필요가 없어졌다.

<Suspense fallback={<Skeleton />}>
  <Event />
</Suspense>