Suspense를 사용하여 비동기적으로 데이터를 재생산하는 방법은?

07 Nov 2023

reactjs

React의 Suspense와 React.lazy는 리액트 애플리케이션에서 비동기적으로 데이터를 로딩하고 재생산하는 효과적인 방법입니다. 이들을 사용하면 사용자가 컴포넌트를 사용할 때까지 필요한 데이터를 동적으로 가져올 수 있습니다. 이를 통해 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.

Suspense란?

Suspense는 리액트 라이브러리의 기능 중 하나로, 비동기 로직의 결과가 준비되기 전까지 대체 콘텐츠를 보여줄 수 있습니다. Suspense를 사용하면 데이터나 코드 스플리팅과 같은 비동기 작업을 처리하는 동안 사용자에게 로딩 상태를 시각적으로 전달할 수 있습니다.

React.lazy를 사용하여 컴포넌트 비동기 로딩하기

React.lazy는 코드 스플리팅을 위해 사용되는 기능으로, 코드 번들의 크기를 줄이고 초기 로딩 시간을 최적화할 수 있습니다. 이를 통해 사용자에게 필요한 컴포넌트를 동적으로 로딩하고, 애플리케이션의 성능을 향상시킬 수 있습니다.

React.lazy를 사용하여 컴포넌트를 비동기적으로 로딩하는 방법은 다음과 같습니다:

필요한 컴포넌트를 import 합니다.

import React, { lazy } from 'react';

React.lazy를 사용하여 비동기적으로 컴포넌트를 로딩합니다.

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

Suspense 컴포넌트를 사용하여 로딩 중일 때 보여줄 대체 콘텐츠를 지정합니다.

import React, { Suspense } from 'react';

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

export default App;

변수 MyComponent는 실제 컴포넌트를 참조하지만, Suspense 컴포넌트는 비동기 로딩 중에 보여줄 대체 콘텐츠를 처리합니다. Suspense 컴포넌트의 fallback 속성에는 로딩 중에 보여줄 JSX 요소를 지정할 수 있습니다.

Suspense를 사용한 데이터 재생산

제대로 구성된 Suspense 컴포넌트는 비동기 데이터 로딩을 위해 사용될 수도 있습니다. 데이터를 로딩하는 동안 사용자에게 로딩 상태를 시각적으로 보여주는 것은 애플리케이션의 사용성을 향상 시킬 수 있습니다.

import React, { Suspense } from 'react';
import { fetchData } from './api';

function App() {
  const data = fetchData();

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent data={data} />
      </Suspense>
    </div>
  );
}

export default App;

위의 예제에서는 fetchData() 함수를 사용하여 비동기 데이터를 로딩하고, DataComponent에 해당 데이터를 전달합니다. Suspense 컴포넌트는 데이터 로딩이 완료될 때까지 로딩 상태를 시각적으로 전달합니다.

결론

React의 Suspense와 React.lazy를 사용하면 애플리케이션의 비동기 작업과 데이터 로딩을 효과적으로 처리할 수 있습니다. Suspense 컴포넌트를 사용하여 사용자에게 로딩 상태를 시각적으로 전달하면 애플리케이션의 성능과 사용자 경험을 개선할 수 있습니다.

#React #Suspense