[React] 🔫Suspense 사용법

▷ Suspense

Suspense(대기)는 React v18부터 도입된 기능으로,
비동기적으로 데이터를 로드할 때 미리 정해진 컴포넌트를 렌더링하고,
로드가 완료되면 실제 데이터를 렌더링 하는 기능이다.

코드를 간결하게 작성할 수 있고, 로딩 상태를 직접 관리할 필요가 없어진다.
일반적으로 React.lazy와 함께 사용하여 코드 스플리팅을 적용한다.

❗️참고) 코드 스플리팅이란 코드에서 당장 사용하는 부분만을 로딩하고, 현재 필요하지 않은 코드 부분은 따로 분리시켜 나중에 로드함으로써 로딩시간을 개선하는 것을 말한다.

🔫 React.lazy

dynamic import를 사용해 컴포넌트를 렌더링할 수 있다.

// React는 SPA이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다.
// React.lazy를 통해 동적으로 import를 하면 초기 렌더링 지연시간을 어느 정도 줄일 수 있게 된다.
import Component from './Component';

// React.lazy로 dynamic import를 감싼다.
const Component = React.lazy(() => import('./Component'));

🔫 React.Suspense

Component가 로드되는 동안 Loading 컴포넌트가 표시된다.
Component가 로드되면, Loading 컴포넌트는 자동으로 사라진다.

// suspense 가져오기
import React, { Suspense } from 'react';

const ComponentA = React.lazy(() => import('./ComponentA'));
const ComponentB = React.lazy(() => import('./ComponentB'));

function Loading() {
  return <div>Loading...</div>
}

function MyComponent() {
  return (
    <div>
	  /* fallback 프로퍼티를 사용하여 로딩 중인 상태를 나타내는 컴포넌트를 정의한다. */
      <Suspense fallback={<Loading />}>
		/* Suspense 컴포넌트 하위에 여러 개의 lazy 컴포넌트를 렌더링시킬 수 있다. */
        <ComponentA />
		<ComponentB />
      </Suspense>
    </div>
  );
}

🔫 React.lazy와 Suspense의 적용

웹 페이지를 불러오고 진입하는 단계인
Route에 이 두 기능을 적용시키는 것이 좋다.

초기 렌더링 시간이 줄어드는 분명한 장점이 있으나,
페이지를 이동하는 과정마다 로딩 화면이 보여지기 때문에
서비스에 따라서 적용 여부를 결정해야 한다.

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Component/Home'));
const About = lazy(() => import('./Component/About'));

function Loading() {
  return <div>Loading...</div>
}

const App = () => (
  <Router>
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

👉 React(공식문서) - Suspense 1 ＋ Route-based code splitting
👉 React(공식문서) - Suspense 2
📜SPA와 Dynamic Import 보러가기