[React] React Suspense

2차 프로젝트 코드 리뷰 중 Loading... 과 관련하여 담당 코치님께서 서스펜스 에 대해서 알아보면 좋을 것 같다고 조언을 해주셔서 이 내용을 공부하면서 정리해보았습니다.

🔹 React Suspense 란?

: 비동기 작업을 진행하는 컴포넌트를 자식 컴포넌트로 가지며,
그 자식 컴포넌트가 비동기 작업을 진행하는 동안
fallback 에 할당받은 특정 컴포넌트를 렌더링 하는 역할을 합니다.

const SamplePage = () => {
  return (
    <Suspense fallback={<h1>Loading Title...</h1>}>
      <TitleDetails />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <PostDetails />
      </Suspense>
    </Suspense>
  );
};

export default SamplePage;

---

🔹 Suspense 사용 전의 문제점

• waterfall 현상
  : 상위 컴포넌트의 데이터 로딩이 끝나야지만 하위 컴포넌트의 데이터 로딩이 시작될 수 있기 때문에 사용자 경험 측면에서 UI를 불러오는 시간이 더 오래 걸리게 됩니다.
  
  → Suspense를 사용하면 컴포넌트의 렌더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 렌더링 할 수 있습니다.

---

🔹 Suspense 사용 예제

• 서스펜스를 쓰기 위해서는 data fetch를 할 때 아래와 같이 특정한 설계를 해주어야 합니다.
  (※ 데이터는 REST API 서비스인 JSONPlaceholder를 사용하였습니다.)

const wrapPromise = (promise) => {
  let status = "pending";
  let response;

  const suspender = promise.then(
    (res) => {
      status = "success";
      response = res;
    },
    (err) => {
      status = "error";
      response = err;
    }
  );

  const read = () => {
    switch (status) {
      case "pending":
        throw suspender;
      case "error":
        throw response;
      default:
        return response;
    }
  };

  return { read };
};

const fetchData = () => {
  const promise = axios
    .get("https://jsonplaceholder.typicode.com/photos")
    .then((res) => res.data.slice(0, 10));

  return wrapPromise(promise);
};

export { fetchData };

• 이후, 아래 PostDetails 컴포넌트가 렌더링 되기 전에 fetchData를 call ( 즉, PostDetails 컴포넌트 외부에서 call ) 해준 뒤,
  해당 값을 컴포넌트 내부에서 불러오면 됩니다.

const resource = fetchData();
const PostDetails = () => {
  // 비록 아직 불러오기가 완료되지 않았겠지만, 이미지 읽기를 시도합니다!
  const example = resource.read();
  return (
    <ul>
      {example.map((post, id) => (
        <li key={id}>
          <img src={post.url}></img>
        </li>
      ))}
    </ul>
  );
};

---

🔸 글을 마치며...

아직 React Suspense에 대한 정보들이 많지 않아서 이해하는데 어려움이 있었지만 개발자, 사용자 모두에게 이점을 제공하는 좋은 기술임을 느꼈습니다. 앞으로 좀 더 많은 활용 사례들이 나오길 바라며 이후에도 계속 공부하여 업데이트하겠습니다.