예제코드를 통해 React Suspense에 대해 이해하기

React Suspense는 컴포넌트가 렌더링하기 전에 API에서 데이터를 로드하는 등 무언가를 기다리는 동안 렌더링을 일시 중단할 수 있는 React의 기능이다. 이를 통해 로딩 스피너나 빈 화면이 표시되는 것을 방지하여 뛰어난 사용자 경험을 제공할 수 있다.

React Suspense는 데이터 로딩이 지연될 수 있는 컴포넌트를 Suspense 컴포넌트로 감싸는 방식으로 작동한다. Suspense 컴포넌트는 컴포넌트가 데이터 로딩을 기다리는 동안 표시되는 fallback 프로퍼티를 제공한다.

다음은 React Suspense의 사용을 보여주는 간단한 예이다.

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

이 예에서는 MyComponent가 Suspense 컴포넌트로 래핑되어 있다. fallback 프로퍼티는 컴포넌트가 데이터 로드를 기다리는 동안 "Loading..."이라는 메시지를 표시하도록 설정되어 있다. lazy 함수는 컴포넌트를 임포트하는 데 사용되며, 이는 코드를 분할하고 필요할 때만 컴포넌트를 로드하는 방법이다.

React Suspense는 useState 및 useEffect와 같은 다른 함수와 결합하여 사용자에게 원활한 경험을 제공할 수 있다. 예를 들어, useEffect 훅을 사용해 API에서 데이터를 가져와 컴포넌트에 표시할 수 있다.

import React, { useState, useEffect, Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data))
  }, []);

  if (!data) {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent data={data}/>
      </Suspense>
    );
  }
}

이 예시에서는 useEffect hook를 사용하여 API에서 데이터를 가져와서 상태를 설정한다. 데이터가 아직 로드되지 않은 경우 컴포넌트는 대기하는 동안 "Loading..."라는 메시지를 표시한다. 데이터가 로드되면 컴포넌트에 데이터가 표시된다.

React Suspense는 컴포넌트가 데이터 로드를 기다리는 동안 사용자 경험을 개선할 수 있는 좋은 방법을 제공한다. 지연 로딩과 대기 중 폴백을 표시하는 기능을 결합한 React Suspense는 사용자에게 빠르고 원활한 경험을 제공하기 위한 강력한 도구이다.