React.Suspense로 비동기 상태 처리(feat. 로딩 띄우기)

 

 

 

 

React.Suspense 아래 트리의 일부 구성 요소가 아직 렌더링할 준비가 되지 않은 경우(데이터를 가져 오는 중일 경우) 쉽게 로딩중임을 표시할 수 있다.

 

import React,{ Suspense } from 'react';
import { OtherComponent } from '../components';

function MyComponent() {
  return (
    <Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}