<aside> ✨ Create Date: 2022/11/27 Update Date:

이 글은 초안이므로, 문장이 매끄럽지 않을 수 있습니다.

</aside>

Suspense는 React v16.6에서 실험 기능(Experimental Feature)로 등장했다가 React v18에 새롭게 추가된 기능입니다.

이 Suspense는 어떤 기능이며, 어떻게 사용할 수 있을까요?

Suspense는 어떤 기능일까요?

Suspense는 컴포넌트 렌더링을 어떤 작업이 끝날 때까지 잠시 중단시키고, 다른 컴포넌트를 먼저 렌더링 할 수 있도록 도와주는 기능입니다. Suspense를 사용하면 Component Lazy Loading이나 Data Fetching 등의 비동기 처리를 할 때, 응답을 기다리는 동안 fallback UI(e.g Spinner)를 보여주고, 그 사이에 우선순위가 높은 다른 UI들을 먼저 렌더링 할 수 있습니다.

어떤 경우에 사용하나요?

React 공식문서에 따르면, 현재(v18) Suspense는 공식적으로 React.lazy를 사용한 Lazy Loading Component를 기다릴 때 사용하고, Data Fetching에 사용되는 것이 가능은 하지만 아직까지 권장되지는 않는다고 이야기하고 있습니다.

하지만 이번 포스팅에서는 Suspense를 Data Fetching에 사용하는 경우에 대해서 집중적으로 살펴볼텐데, 이는 React Core Team이 궁극적으로 Suspense를 Data Fetching 뿐 아니라 이미지 로딩 등 어떠한 형태의 “비동기 요청”에 대해서도 사용할 것이라는 목표를 가지고 있기 때문입니다.

(실제로 모든 라이브러리들은 아니지만 Relay, SWR, Recoil와 같은 Library에서는 이미 Suspense를 사용해서 Data Fetching을 할 수 있도록 지원하고 있으며, 앞으로 대부분의 Data Fetching Library들이 Suspense에 대한 지원을 추가하게 될 것입니다.)

Suspense가 기존 비동기 요청들에서 발생하는 여러 문제들을 해결한다구요?

const Image = () => {
  const [loading, setLoading] = useState(true);
  const [imageURL, setImageURL] = useState();

  useEffect(() => {
    const response = fetchData();
    setImageURL(response.data);
    setLoading(false);
  }, []);

  if (loading) return <p>Loading...</p>;
  return <img src={imageURL} alt='고양이 사진' />;
};

위 예제는 고양이 이미지를 API를 통해 불러오는 예제입니다. API 호출이 완료되지 않은 상태라면 (loading이 true인 경우) Loading… 메세지를 화면에 보여주게 됩니다.

만약 여기에 API 호출 시 에러가 발생했을 때 에러를 처리하는 로직을 추가하게 된다면 어떻게 할 수 있을까요? if (loading) 구문처럼 개발자가 다소 명령적(Imperative)인 방법으로 분기를 추가해야 할 것입니다.