Suspense API

Suspense API

Suspense API는 React에서 컴포넌트의 로딩 상태를 관리할 수 있게 해주는 기능이다. 어떤한 데이터가 가져와질 때까지 컴포넌트의 렌더링을 중단(Suspend)하고 그 동안 대체 UI를 표시할 수 있는 방법을 제공한다.
비동기 데이터 로딩을 처리하고 React 애플리케이션에서 부드러운 사용자 경험을 제공한다.

Suspense 와 lazy는 React에서 비동기 컴포넌트 로딩을 지원하는 기능이다.

Suspense

Suspense는 React에서 비동기적인 작업의 완료를 기다릴 때 사용되는 컴포넌트이다. 특히 코드 스플리팅(Splitting)과 데이터 로딩에 주로 사용된다.

fallback
비동기 작업이 완료되기 전까지 대체할 UI를 나타내는 속성이다. 일반적으로 로딩 스피너나 다른 로딩 메시지를 표시한다.

lasy

lazy함수는 코드 스플리팅을 가능하게 하는 함수로, 동적으로 컴포넌트를 로딩할 때 사용된다. 이를 통해 크기를 줄이고 초기 로딩 시간을 최적화할 수 있다.

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

비동기적 모듈을 가져오기 위한 코드이다.

---

Suspense API 사용 예시

import { useState } from 'react';

const newItems = Array.from({ length: 5000 }, (_, index) => {
  return (
    <div key={index}>
      <img src='/vite.svg' alt='' />
    </div>
  );
});

const SlowComponent = () => {
  const [items, setItems] = useState(newItems);
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr 1fr',
        marginTop: '2rem',
      }}
    >
      {items}
    </div>
  );
};
export default SlowComponent;

---

import { useState, useTransition, Suspense, lazy } from 'react';
const SlowComponent = lazy(() => import('./SlowComponent'))
const LatestReact = () => {
  const [text, setText] = useState('');
  const [items, setItems] = useState([]);
  const [isPending, startTransition] = useTransition();
  const [show, setShow] = useState(false);

  const handleChange = (e) => {
    setText(e.target.value);

    // slow down CPU
    startTransition(() => {
      const newItems = Array.from({ length: 5000 }, (_, index) => {
        return (
          <div key={index}>
            <img src='/vite.svg' alt='' />
          </div>
        );
      });
      setItems(newItems);
    });
  };
  return (
    <section>
      <form className='form'>
        <input
          type='text'
          className='form-input'
          value={text}
          onChange={handleChange}
        />
      </form>
      <h4>Items Below</h4>
    {isPending ?
      <h4>Loading...</h4> 
      : 
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr',
          marginTop: '2rem',
        }}
      >
        {items}
      </div>
      }
      <button onClick={() => setShow(!show)} className='btn'>toggle</button>
      {show && 
        <Suspense fallback={<h4>Loading...</h4>}>
          <SlowComponent/>
        </Suspense>
      }
    </section>
  );
};
export default LatestReact;

코드 설명

• SlowComponent를 동적으로 로딩하기 위해 lazy를 사용하고있다.
• Suspense를 이용하여 비동기적으로 로딩되는 SlowComponet를 감싸 fallback을는 로딩 중 메시지를 표시한다.
• lazy 함수를 사용하면 최초 렌더링 시에 해당 컴포넌트의 코드를 불러오지 않고 필요한 경우 그 코드가 로드된다.