[React] 리액트 서스펜스(React Suspense) 사용 방법

1. 리액트 서스펜스란?

리액트 서스펜스는 컴포넌트가 렌더링되기 전에 필요한 데이터나 리소스가 준비될 때까지 로딩 상태를 선언적으로 관리할 수 있게 해주는 기능입니다.

2. 서스펜스를 사용하는 이유

• 비동기 작업의 로딩 상태를 더 우아하게 처리할 수 있습니다.
• 코드 스플리팅과 데이터 페칭을 더 간단하게 구현할 수 있습니다.
• 사용자 경험을 향상시킬 수 있는 로딩 UI를 쉽게 구현할 수 있습니다.

3. 서스펜스 사용법

기본적인 사용 예시:

import { Suspense } from 'react';

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

4. 주요 사용 사례

데이터 페칭

function ProfilePage() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <ProfileDetails />
    </Suspense>
  );
}

코드 스플리팅

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

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

5. 서스펜스 사용 시 주의사항

• fallback prop은 필수적으로 지정해야 합니다.
• 중첩된 서스펜스를 사용할 때는 로딩 상태의 계층 구조를 고려해야 합니다.
• ErrorBoundary와 함께 사용하여 에러 처리를 구현하는 것이 좋습니다.

6. 성능 최적화 팁

• 불필요한 서스펜스 경계를 만들지 않도록 주의
• 적절한 위치에 서스펜스를 배치하여 로딩 UI 최적화
• 캐싱 전략과 함께 사용하여 성능 향상

이러한 서스펜스의 적절한 활용은 리액트 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다.

 

 

 

 

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.