기존의 React 애플리케이션에서 사용자 인증을 처리하면서 입장/접근이 제한된 페이지에 대한 로딩 상태를 관리해야 할 때가 있습니다. 이러한 로딩 상태를 우아하게 처리하기 위해 Suspense를 사용할 수 있습니다. Suspense는 React 16.6 버전 이후부터 도입된 기능으로, 비동기적으로 작업을 수행하는 컴포넌트들을 사전에 로딩해두고 그 과정에서 로딩 상태를 관리할 수 있게 해줍니다.

1. Suspense 컴포넌트 사용하기

Suspense 컴포넌트를 사용하기 위해서는 먼저 react 패키지와 react-dom 패키지의 버전이 16.6 이상이어야 합니다. 이후에 Suspense 컴포넌트를 import하고, 사용자 인증 정보를 가져오는 컴포넌트를 감싸주는 형태로 코드를 작성합니다.

import React, { Suspense } from 'react';

function App() {
  return (
    <div>
      <h1>사용자 인증 로딩 관리 예제</h1>
      <Suspense fallback={<LoadingSpinner />}>
        <AuthenticatedComponent />
      </Suspense>
    </div>
  );
}

function AuthenticatedComponent() {
  // 사용자 인증 정보 가져오기
  // ...

  return (
    // 접근 제한된 페이지 컴포넌트 렌더링
    <RestrictedPage />
  );
}

2. fallback 속성 사용하기

Suspense 컴포넌트의 fallback 속성을 사용하여 로딩 중일 때에 보여줄 대체 컴포넌트를 지정할 수 있습니다. 위의 예제에서는 LoadingSpinner 컴포넌트를 fallback으로 지정했습니다. 이 컴포넌트는 로딩 중임을 사용자에게 시각적으로 표시하는 용도로 사용될 수 있습니다. 사용자 인증 정보를 가져오는 작업이 끝나면 실제로 접근 제한된 페이지 컴포넌트가 렌더링됩니다.

3. Suspense 경계 설정하기

만약, 여러 개의 비동기 컴포넌트들이 존재하는 경우에는 Suspense 컴포넌트로 감싸줄 때 each에 각각의 경계를 설정해줄 수 있습니다. 이를 통해 각 비동기 작업마다 별도의 로딩 상태를 설정할 수 있습니다.

<Suspense fallback={<LoadingSpinner />}>
  <section>
    <h2>비동기 컴포넌트 1</h2>
    <AsyncComponent1 />
  </section>
  <section>
    <h2>비동기 컴포넌트 2</h2>
    <AsyncComponent2 />
  </section>
</Suspense>

마무리

Suspense를 사용하여 사용자 인증 로딩을 관리하는 방법에 대해 알아보았습니다. 이를 통해 로딩 상태를 우아하게 처리하고, 사용자 경험을 향상시킬 수 있습니다. React 16.6 이상의 버전을 사용하고 있다면 Suspense 컴포넌트를 활용하여 코드를 깔끔하고 효율적으로 작성해보세요!

참고 자료: React 공식 문서 - Suspense

Tags: #React #Suspense