React Concurrent Mode의 데이터 로딩 전략

09 Nov 2023

ConcurrentMode

React Concurrent Mode는 React 18부터 도입된 새로운 기능으로, 사용자에게 더 빠르고 반응적인 웹 애플리케이션을 제공하기 위해 설계되었습니다. 이 모드는 애플리케이션의 성능을 향상시키는 데 도움이 되는 다양한 기능과 도구를 제공합니다. 이 중에서도 데이터 로딩 전략은 React Concurrent Mode를 활용하는데 중요한 역할을 합니다.

React Concurrent Mode에서는 애플리케이션의 데이터 로딩을 최적화하기 위해 Suspense라는 기능을 사용할 수 있습니다. Suspense는 컴포넌트가 비동기적으로 데이터를 로딩할 때 사용되며, 로딩이 완료될 때까지 사용자에게 로딩 화면을 표시할 수 있습니다.

일반적으로 React Concurrent Mode에서의 데이터 로딩 전략은 아래와 같이 구성됩니다.

Suspense 컴포넌트 사용: 데이터 로딩이 필요한 컴포넌트에서 Suspense 컴포넌트를 사용하여 로딩 중인 상태를 표시합니다.

<Suspense fallback={<LoadingSpinner />}>
  <DataLoadingComponent />
</Suspense>

데이터 로딩 컴포넌트 분리: 데이터 로딩에 필요한 컴포넌트들을 별도로 분리하여 코드를 모듈화합니다. 이렇게 함으로써 각 컴포넌트가 독립적으로 데이터를 로딩하고 처리할 수 있습니다.

// DataLoadingComponent.js
const DataLoadingComponent = () => {
  const data = useFetchData(); // 비동기 데이터 로딩 로직
  return <DataComponent data={data} />;
};

// DataComponent.js
const DataComponent = ({ data }) => {
  // 데이터를 활용한 컴포넌트 렌더링 로직
};

데이터 로딩 대기 시간 분산: 데이터 로딩 컴포넌트들의 대기 시간을 분산시켜, 한 번에 모든 데이터를 로딩하지 않고 필요한 데이터만 로딩하여 효율성을 높입니다.

React Concurrent Mode의 데이터 로딩 전략을 통해 애플리케이션의 성능을 향상시킬 수 있습니다. 데이터 로딩에 걸리는 시간을 최소화하고, 사용자에게 부드러운 경험을 제공할 수 있습니다.

참고 자료:

React Docs: Concurrent Mode
React Suspense: A new way to handle async rendering in React

#React #ConcurrentMode