React Suspense

React Suspense: 데이터 로딩과 코드 스플리팅을 위한 매끄러운 해결책

 

React Suspense는 React 16.6 버전에서 도입된 기능으로, 컴포넌트 렌더링 전에 데이터 로딩이나 코드 스플리팅과 같은 비동기 작업이 완료될 때까지 기다릴 수 있도록 해줍니다. 이를 통해 사용자 경험을 향상시키고, 더욱 복잡하고 동적인 웹 애플리케이션을 구축할 수 있도록 지원합니다.

Suspense의 핵심 개념

• 지연 렌더링 (Deferred Rendering): Suspense는 컴포넌트 렌더링을 지연시켜 데이터가 준비될 때까지 기다립니다. 이는 사용자에게 불필요한 로딩 화면을 보여주는 대신, 데이터가 준비되는 동안 다른 부분을 먼저 렌더링하여 더 빠른 반응성을 제공합니다.
• Fallback UI: 데이터 로딩 중에 사용자에게 보여줄 임시 UI를 설정할 수 있습니다. 스켈레톤 로딩이나 간단한 메시지 등을 통해 사용자에게 로딩 중임을 알리고, 더 나은 사용자 경험을 제공할 수 있습니다.
• 코드 스플리팅: Suspense는 코드 스플리팅과 함께 사용하여 큰 번들을 작은 청크로 나누고, 필요한 청크만 로딩하여 초기 로딩 시간을 단축시킬 수 있습니다.

728x90

Suspense 사용 방법

1. React.lazy를 통한 코드 스플리팅:

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

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

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

 

 

• React.lazy 함수를 사용하여 다른 컴포넌트를 동적으로 import합니다.
• Suspense 컴포넌트로 감싸고, fallback prop을 통해 로딩 중에 보여줄 UI를 설정합니다.

2. 데이터 페칭과 함께 사용:

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

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

  const fetchData = async () => {
    const response = await fetch('/api/data');
    setData(await response.json());
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (data === null) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // 임시로 데이터 로딩 시뮬레이션
  }

  return (
    <div>
      {/* 데이터를 사용하는 부분 */}
    </div>
  );
}

 

• useState와 useEffect를 사용하여 데이터를 페칭하고 상태를 관리합니다.
• 데이터가 준비되지 않은 경우, Promise를 throw하여 Suspense가 이를 감지하도록 합니다.

Suspense의 장점

• 향상된 사용자 경험: 데이터 로딩 중에도 사용자 인터페이스를 유지하여 더욱 매끄러운 사용자 경험을 제공합니다.
• 코드 분할: 코드 스플리팅을 통해 초기 로딩 시간을 단축하고, 애플리케이션 성능을 향상시킵니다.
• 복잡한 애플리케이션 관리 용이: Suspense를 사용하면 복잡한 데이터 흐름과 비동기 작업을 더욱 효율적으로 관리할 수 있습니다.

Suspense의 단점 및 주의사항

• 추가적인 설정: Suspense를 사용하기 위해서는 코드 스플리팅 설정이나 데이터 페칭 로직 등 추가적인 설정이 필요할 수 있습니다.
• 복잡한 상태 관리: 여러 개의 Suspense 컴포넌트를 사용하는 경우, 상태 관리가 복잡해질 수 있습니다.
• 브라우저 지원: 모든 브라우저에서 Suspense를 완벽하게 지원하지 않을 수 있습니다.

결론

React Suspense는 데이터 로딩과 코드 스플리팅을 위한 강력한 도구입니다. Suspense를 활용하여 더욱 빠르고 반응성이 뛰어난 React 애플리케이션을 개발할 수 있습니다. 하지만 Suspense를 효과적으로 사용하기 위해서는 관련 개념과 사용법에 대한 충분한 이해가 필요합니다.