React.Suspense

카테고리 없음

React.Suspense

nunaaa 2025. 9. 5. 03:32

React.Suspense는 리액트 컴포넌트가 로딩될 때까지 기다렸다가 사용자에게 대체 UI를 보여주는 기능입니다. 주로 코드 분할(code-splitting)을 통해 동적으로 불러오는 컴포넌트나 비동기 데이터를 가져올 때 사용합니다.

React.Suspense의 주요 기능

1. 코드 분할과 함께 사용

Suspense는 **React.lazy()**와 함께 사용될 때 가장 강력한 효과를 냅니다. React.lazy()는 컴포넌트를 필요한 시점에 동적으로 불러오도록 도와줍니다. 이 덕분에 초기 로딩 시 불필요한 코드를 모두 다운로드하지 않고, 필요한 컴포넌트만 따로 불러와 웹페이지의 로딩 속도를 개선할 수 있습니다.

예시 코드:

import React, { Suspense } from 'react';
import MyComponent from './MyComponent'; // 동적으로 불러올 컴포넌트

// MyComponent를 Suspense와 함께 사용하기 위해 lazy로 감싸줍니다.
const LazyMyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <p>메인 콘텐츠</p>
      {/* MyComponent가 로딩될 때까지 fallback에 있는 UI를 보여줍니다. */}
      <Suspense fallback={<div>로딩 중...</div>}>
        <LazyMyComponent />
      </Suspense>
    </div>
  );
}

위 코드에서 LazyMyComponent가 아직 로딩되지 않았다면, <Suspense>는 fallback에 있는 <div>로딩 중...</div>을 대신 보여줍니다. MyComponent의 로딩이 완료되면, 그 자리에 MyComponent가 나타나게 됩니다.

2. 데이터 가져오기(Data Fetching)

Suspense는 미래에 비동기 데이터 가져오기(예: GraphQL, REST API)를 더 쉽게 처리할 수 있도록 설계되었습니다. 현재는 일부 라이브러리(예: Relay, Apollo Client)에서 Suspense를 활용한 데이터 페칭을 지원하고 있으며, 리액트 팀은 이 기능을 더 많은 라이브러리와 통합하는 작업을 진행 중입니다.

이 방식의 핵심은 **"데이터가 준비될 때까지 컴포넌트 렌더링을 멈추는 것"**입니다. 기존에는 데이터를 가져오기 위해 로딩 상태를 직접 관리해야 했지만, Suspense를 사용하면 로직이 훨씬 단순해집니다.

Suspense 사용의 이점

사용자 경험 개선: 로딩 상태를 명확하게 보여주어 사용자가 페이지가 멈췄다고 느끼지 않게 합니다.
코드 단순화: 복잡한 로딩 상태(isLoding) 관리를 **fallback**이라는 단일 prop으로 대체하여 코드를 더 깔끔하게 만듭니다.
성능 최적화: 코드 분할을 통해 초기 로딩 시간을 단축합니다.

Suspense는 UI 렌더링과 데이터 로딩을 분리하여 리액트 앱을 더 효율적이고 사용자 친화적으로 만드는 중요한 도구입니다.

React.Suspense