TIL 2022.09.26

https://velog.io/@xiniha/React-Suspense-알아보기
xiniha님의 블로그글 내용 정리

react suspense 알아보기

전통적 방식의 비동기 데이터 기반 렌더링

비동기 데이터에 의존하여 UI를 그리는 컴포넌트를 작성하게 된다.
React의 컴포넌트 렌더링은 동기적으로 이뤄저야하기 때문에, 비동기 컴포넌트 렌더링은 별도의 처리가 필요한데, 이런경우에 가장 전통적으로 사용되는 구현법이 비동기 데이터의 로딩 상태를 컴포넌트내에서 관리하여 로딩상태에 따라 적절한 UI를 그려주는 방식이다.

Hook에서 로딩이나 에러 상태를 별도로 관리한다던가 React Query같은 원격 상태 라이브러리를 이용하는 사람들도 있을 것.

하지만 몇 가지 문제가 존재.

• 개별 컴포넌트가 각각 로딩 상태를 표현하는 방식을 정의함. => 이는 상황에 따라 UI의 일관성을 떨어뜨림.
• 컴포넌트 렌더링이 완료된 후 컴포넌트가 DOM에 Mount 된어 useEffect()가 실행되는 시점에 데이터를 가져오기 시작함.
• React는 비동기 렌더링을 이해할 수 없고, SSR 등의 상황에 대응하려면 별도의 작업이 필요함.

이럴때 나온게, Suspense

비동기 렌더링을 위한 새로운 표현 방식이다.

// App.jsx
const App = () => {
  return (
    <Suspense fallback={'Loading...'}>
      <Component />
      <Component />
    </Suspense>
  )
}

Suspense를 사용해 child 컴포넌트들의 로딩 상태를 하나로 묶는게 가능하다.