React의 Suspense는 비동기적으로 로딩되는 컴포넌트나 리소스를 처리하기 위한 기능입니다. 페이지 로딩 상태를 관리하기 위해 Suspense를 사용하는 방법을 알아보겠습니다.

1. Suspense 사용 준비

먼저, React 16.6 버전 이상을 사용하고 있는지 확인해야합니다. Suspense는 이 버전부터 도입되었습니다.

Suspense를 사용하기 위해선 react와 react-dom 패키지를 설치해야합니다:

npm install react react-dom

2. Suspense를 사용한 로딩 상태 관리

Suspense를 사용하여 페이지 로딩 상태를 관리하는 방법은 아래의 단계로 구현할 수 있습니다:

2.1 비동기적으로 로딩되는 컴포넌트 작성

먼저, 비동기적으로 로딩되는 컴포넌트를 작성해야합니다. 이 컴포넌트는 React.lazy 함수를 사용하여 생성할 수 있습니다. 예를 들어, MyComponent가 비동기적으로 로딩되는 컴포넌트라고 가정해보겠습니다.

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

2.2 Suspense 컴포넌트를 사용하여 로딩 상태 관리

다음으로, Suspense 컴포넌트를 사용하여 로딩 상태를 관리합니다. Suspense 컴포넌트는 비동기 컴포넌트를 렌더링 하기 전에 로딩 상태를 처리하는 역할을 합니다.

예를 들어, 아래와 같이 Suspense 컴포넌트로 감싸진 컴포넌트를 렌더링할 수 있습니다:

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

fallback prop은 로딩 중에 표시될 컴포넌트를 정의합니다. 위의 예시에서는 “로딩 중…“을 나타내는 div를 사용하였습니다.

3. 에러 처리

만약 비동기 컴포넌트의 로딩에 실패하면, Suspense 컴포넌트는 에러를 처리할 수 있습니다. 에러를 처리하기 위해서는 ErrorBoundary 컴포넌트를 사용해야합니다.

예를 들어, 아래와 같이 ErrorBoundary 컴포넌트를 작성하고 Suspense 컴포넌트로 감싸는 방법을 사용할 수 있습니다:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 에러를 기록하거나 에러 로깅 서비스에 보낼 수 있습니다.
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <div>에러가 발생했습니다.</div>;
    }

    return this.props.children;
  }
}

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

위의 예시에서 ErrorBoundary 컴포넌트는 에러를 처리하고 에러 메시지를 렌더링합니다. componentDidCatch 메소드에서 에러를 기록하거나 에러 로깅 서비스에 전송할 수 있습니다.

이제 Suspense를 사용하여 페이지 로딩 상태를 관리하는 방법에 대해 알게 되었습니다. Suspense는 비동기 컴포넌트 혹은 리소스를 처리할 때 유용한 기능이므로 활용해보시기 바랍니다.

References

• React Documentation: Suspense
• React Documentation: React.lazy
• React Documentation: Error Boundaries