React 18의 새로운 기능: 동시성 모드(Concurrent Mode)

React 18 소개: 동시성 모드의 등장

React 18의 Cuncurrent Mode

 

2022년에 등장한 React 18의 가장 주목할 만한 혁신 중 하나는 동시성 모드(Concurrent Mode)의 도입입니다. 동시성 모드는 React 애플리케이션의 반응성과 성능을 대폭 향상시키는 새로운 기능으로, 애플리케이션의 UI 렌더링을 중단하거나 우선순위를 변경할 수 있게 해주어 사용자 인터랙션과 애니메이션을 더욱 부드럽게 만듭니다. 이 모드를 활성화하려면, 새로운 루트 API인 createRoot를 사용하여 애플리케이션의 루트를 생성합니다.

import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container); // 동시성 모드 활성화

root.render(<App />);

이 코드는 React 18에서 동시성 모드를 활성화하는 방법을 보여줍니다. createRoot를 통해 애플리케이션의 루트를 생성하면, React는 동시성 모드에서 작동하게 됩니다.

 

자동 배치(Automatic Batching)의 향상

React 18에서는 자동 배치 기능이 향상되어, 이벤트 핸들러뿐만 아니라 프로미스, setTimeout 같은 비동기 작업에서도 상태 업데이트가 자동으로 배치 처리됩니다. 이는 여러 상태 업데이트가 하나의 렌더링 업데이트로 결합되어 성능을 향상시키는 역할을 합니다.

setTimeout(() => {
  setCount(c => c + 1); // 첫 번째 상태 업데이트
  setFlag(f => !f);    // 두 번째 상태 업데이트
}, 1000);

이 예시에서 setCount와 setFlag는 자동으로 배치 처리되어, 하나의 렌더링으로 처리됩니다. 이 기능은 애플리케이션의 성능을 향상시키는 데 크게 기여합니다.

 

우선순위 기반 렌더링: startTransition

React 18의 startTransition API를 통해 개발자는 비동기 작업을 시작할 때, 해당 업데이트의 우선순위를 낮출 수 있습니다. 이는 사용자가 인터랙티브한 작업(예: 텍스트 입력)을 수행할 때, 이러한 작업에 대한 반응성을 유지하면서도 배경에서 무거운 데이터 로딩과 같은 작업을 수행할 수 있게 해줍니다.

import { startTransition } from 'react';

function handleSearch(query) {
  startTransition(() => {
    setSearchQuery(query);
  });
}

이 코드에서 startTransition은 setSearchQuery의 업데이트를 비동기적으로 처리하고, 이 업데이트의 우선순위를 낮춥니다. 이를 통해 애플리케이션은 사용자의 입력과 같은 중요한 작업을 빠르게 처리할 수 있습니다.

 

Suspense와 useDeferredValue로 데이터 페칭 개선

React 18은 데이터 페칭과 같은 비동기 작업을 더욱 효율적으로 처리할 수 있는 Suspense와 useDeferredValue를 확장했습니다. Suspense는 데이터가 로딩되는 동안 대체 콘텐츠(예: 로딩 인디케이터)를 보여주고, useDeferredValue는 데이터 로딩으로 인한 UI 업데이트를 지연시킬 수 있습니다.

import { Suspense, useDeferredValue } from 'react';

function SearchResult({ query }) {
  const deferredQuery = useDeferredValue(query);

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

이 코드는 useDeferredValue를 사용하여 검색 쿼리의 업데이트를 지연시키고, Suspense를 사용하여 데이터가 로드되는 동안 로딩 인디케이터를 보여주는 방법을 보여줍니다. 이러한 기능을 통해 사용자는 데이터가 로드되는 동안에도 애플리케이션과 상호작용할 수 있으며, 이는 전반적인 사용자 경험을 개선합니다.

 

React 18의 이러한 새로운 기능들은 애플리케이션의 반응성과 성능을 크게 향상시킬 수 있으며, 개발자들이 더욱 효율적이고 사용자 친화적인 웹 애플리케이션을 구축할 수 있도록 지원합니다.