React Concurrent Mode는 React 18에서 도입된 기능으로, 렌더링 성능을 향상시키는데 도움을 주는 새로운 모드입니다. 이 모드에서는 React 애플리케이션을 동시에 여러 부분으로 나누어 렌더링하므로, 사용자 경험을 향상시키는 동시에 렌더링 오버헤드를 최소화할 수 있습니다.

렌더링 오버헤드는 React 애플리케이션이 컴포넌트 트리를 업데이트하고 다시 렌더링하는 데 소요되는 시간을 말합니다. 대규모 애플리케이션에서는 수천 개의 컴포넌트가 동시에 렌더링되고 업데이트되는 경우가 있을 수 있으며, 이는 성능 저하로 이어질 수 있습니다.

React Concurrent Mode를 사용하여 이러한 렌더링 오버헤드를 최소화할 수 있습니다. 다음은 React Concurrent Mode의 렌더링 오버헤드 최소화를 위한 몇 가지 전략입니다.

1. startTransition API 사용하기

React Concurrent Mode에서는 startTransition API를 사용하여 우선순위가 낮은 작업을 예약할 수 있습니다. 이를 통해 높은 우선순위의 작업을 처리하는 동안 렌더링이 지연되는 현상을 막을 수 있습니다. 예를 들어, 사용자 입력이나 네트워크 응답과 같은 높은 우선순위 작업이 있을 때 startTransition API를 사용하여 대기 중인 작업을 예약할 수 있습니다.

import { startTransition } from 'react';

function handleClick() {
  startTransition(() => {
    // 예약할 작업 수행
  });
}

2. Suspense 컴포넌트 사용하기

Suspense 컴포넌트는 React Concurrent Mode에서 비동기적으로 데이터를 로딩하는 데 사용됩니다. 이 컴포넌트를 사용하면 데이터 로딩이 완료될 때까지 UI를 보여주지 않고 대기 상태를 유지할 수 있습니다. 이를 통해 로딩 시간을 최소화하고 유저 경험을 향상시킬 수 있습니다.

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

React Concurrent Mode에서는 렌더링 오버헤드를 최소화하기 위한 다양한 전략이 제공됩니다. 위에서 소개한 두 가지 전략만으로도 성능 개선을 할 수 있지만, 실제 애플리케이션의 특성에 맞게 다른 전략들을 추가로 사용할 수도 있습니다.

React Concurrent Mode에 대한 자세한 내용은 React 공식 문서를 참조하세요.

#React #ReactConcurrentMode