Suspense 라는 React 신기술을 사용하면 컴포넌트의 렌더링을 어떤 작업이 끝날 때 까지 잠시 중단시키고 다른 컴포넌트를 렌더링할 수 있다. (로딩 인디케이터와 비슷한 느낌)

ex)

import React, { Suspense } from "react";
import App from "./App";
import { HashRouter } from "react-router-dom";

ReactDOM.render(
  <Suspense fallback={<Loader />}>
    <HashRouter>
      <App />
    </HashRouter>
  </Suspense>,

  document.getElementById("root")
);

// 컴포넌트를 <Suspense>로 감싸주면 컴포넌트의 렌더링을 특정 작업 이후로 미루고, 
// 그 작업이 끝날 때 까지는 fallback 속성으로 넘긴 컴포넌트를 대신 보여준다

기존의 suspense를 쓰지 않고 API를 받아오기 전에 로딩인디케이터를 적용하는 방법은 고질적인 문제가 몇가지 있다.

1. 최종 사용자(end user) 경험 측면에서 UI가 폭포처럼 순차적으로 나타나는 현상이 나타날 수 있다. 이러한 폭포 현상은 특히 한 페이지 상의 여러 컴폰너트에서 동시에 비동기 데이터를 읽어오는 경우 자주 발생한다. 상위 컴포넌트의 데이터 로딩이 끝나야지만 하위 컴포넌트의 데이터 로딩이 시작될 수 있기 때문에 주로 발생하게 된다.
2. 초기 렌더링 이후 데이터 로딩 후 다시 렌더링을 하는 방법은 경쟁 상태에도 취약하다. 비동기 통신은 반드시 요청한 순서대로 데이터가 응답된다는 보장이 없기 때문에 의도치 않게 싱크가 맞지 않은 데이터를 제공할 수도 있다.
3. 개발 측면에서 if 조건문을 사용해서 어떤 컴포넌트를 보여줄지를 제어하는 것은 선언형 코드가 아닌 명령형 코드에 가깝기 때문에 선언적 코드를 지향하는 React의 기본 방향성과 맞지 않는다.