React Concurrent Mode의 디자인 패턴과 최적화 전략

09 Nov 2023

ConcurrentMode

React Concurrent Mode는 React의 새로운 기능으로, 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데 도움을 줍니다. 이 모드에서는 동시에 여러 작업을 처리하는 방식으로 브라우저의 높은 우선순위 작업과 React의 업데이트 사이의 조화를 이룹니다. 이 문서에서는 React Concurrent Mode의 디자인 패턴과 최적화 전략에 대해 알아보겠습니다.

1. React Suspense

React Suspense는 React Concurrent Mode에서 가장 중요한 디자인 패턴 중 하나입니다. Suspense를 사용하면 컴포넌트가 데이터를 불러오는 동안 로딩 상태를 처리하거나 오류를 처리할 수 있습니다. Suspense는 lazy loading, 코드 분할 등과 함께 사용되어 애플리케이션의 성능을 향상시키는 데 도움을 줍니다.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

위의 예시에서는 React.lazy 함수를 사용하여 LazyComponent를 비동기적으로 불러옵니다. <Suspense> 컴포넌트는 fallback prop을 사용하여 로딩 중에 보여줄 컴포넌트를 지정합니다.

2. Concurrent Rendering

Concurrent Rendering은 React Concurrent Mode의 핵심 기능입니다. 이 기능은 React 업데이트를 중단하고 다른 작업을 수행할 수 있는 형태의 React Scheduler를 도입하여 애플리케이션의 성능과 반응성을 향상시킵니다. Concurrent Rendering은 애플리케이션의 다양한 컴포넌트와 연결된 상태를 관리하는 데 도움이 됩니다.

import React, { useState, useEffect } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>;
};

위의 예시에서는 useState 훅을 사용하여 count 상태를 관리합니다. useEffect 훅을 사용하여 간격마다 count 상태를 업데이트합니다. Concurrent Rendering을 사용하면 애플리케이션이 블로킹되지 않고 반응성을 유지합니다.

React Concurrent Mode의 최적화 전략

React Concurrent Mode를 사용할 때 최적화를 고려하는 것이 중요합니다. 아래는 React Concurrent Mode의 최적화 전략입니다.

느긋한 렌더링(Lazy Rendering): 필요한 모든 컴포넌트를 처음부터 모두 렌더링하지 않고, 필요할 때만 렌더링합니다.
메모이제이션(Memoization): 계산에 많은 시간이 걸리는 연산을 한 번만 수행하고 결과를 캐시하여 재사용합니다.
버츄얼리즈(Virtualization): 대량의 데이터나 리스트를 효율적으로 렌더링하기 위해 가상화 기법을 사용합니다.
비동기 렌더링(Async Rendering): React Suspense와 함께 사용하여 렌더링을 분할하고 일부 작업을 순차적으로 처리합니다.

React Concurrent Mode의 디자인 패턴과 최적화 전략을 활용하면 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 이러한 기능을 활용하여 더 반응성이 뛰어난 사용자 경험을 제공할 수 있습니다.

1. React Suspense

2. Concurrent Rendering

React Concurrent Mode의 최적화 전략

References