React 18, Suspense 한눈에 알아보기

Suspense란,

이전에는 React.lazy와 함께 사용 되었으나, 현재는 이외에도 선언적으로, 데이터 비동기 렌더링 처리를 도와준다.

usage

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

// AsyncComponent
const AsyncComponent = () => {
	const { data, error, isLoading } = useGetUserData('userData');
    ...
    
    /* error, loading 에 따른 분기 처리를 하지 않아도 된다
    error 의 경우 ErrorBoundary 컴포넌트를 만들어서 처리 할 수 있다.*/
}

이점

• Suspense 로 감싸여진 컴포넌트가 비동기 데이터 처리를 하고 있음을 알 수 있다.
• 비동기 데이터 처리를 하고 있는 컴포넌트의 코드가 짧아진다.
  - 자바스크립트의 비동기처리 async/await 문법을 사용 하듯 상태에 따른 분기처리를 하지 않아도 된다는 장점이 있음

간단하게 동작원리 알아보기

Suspense 로 감싼 컴포넌트에서 비동기 처리가 이루어 졌을 때, 해당 비동기 처리가 비동기 상태status에 따라 Promise, 비동기 처리 결과 값 을 throw, return 을 하게 된다.

  let status = "pending";
  let result;
  let suspender = promise.then(
    (r) => {
      status = "success";
      result = r;
    },
    (e) => {
      status = "error";
      result = e;
    }
  );
  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    }
  };

같이 보면 좋을 라이브러리 및 개념

1. ErrorBoundary
2. Recoil
3. React-Query
4. SWR

-ref
데이터를 가져오기 위한 Suspense - React Docs