React Concurrent Mode와 성능 개선 전략

09 Nov 2023

reactjs

React는 웹 애플리케이션 개발에서 매우 인기 있는 자바스크립트 라이브러리입니다. 그러나 큰 규모의 애플리케이션에서는 성능 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 React는 Concurrent Mode를 도입하여 성능을 개선하고자 합니다.

Concurrent Mode란?

Concurrent Mode는 React 18에서 도입된 기능으로, React의 내부 동작 방식을 변경하여 성능 문제를 해결합니다. 기존의 React는 한 번에 하나의 작업을 처리하고 렌더링하는데, Concurrent Mode는 여러 작업을 동시에 처리해 렌더링할 수 있게 합니다. 이를 통해 사용자 경험을 향상시키고 성능을 개선할 수 있습니다.

Concurrent Mode의 장점

Concurrent Mode는 다음과 같은 장점을 가지고 있습니다.

Responsiveness (반응성): Concurrent Mode를 사용하면 사용자의 입력에 대해 빠르게 응답할 수 있습니다. 예를 들어, 사용자가 화면을 스크롤하거나 버튼을 클릭하는 등의 이벤트가 발생하면, React는 우선적으로 해당 이벤트에 대한 렌더링을 처리합니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.
Idle-time rendering (유휴 시간 렌더링): Concurrent Mode는 렌더링 작업이 유휴 시간에 실행될 수 있도록 지원합니다. 즉, 사용자가 애플리케이션을 사용하지 않는 동안 렌더링 작업을 실행하여 미리 데이터를 불러오거나 캐싱할 수 있습니다. 이를 통해 초기 로딩 속도를 개선할 수 있습니다.

성능 개선 전략

Concurrent Mode를 활용하여 성능을 개선하는 몇 가지 전략을 알아보겠습니다.

1. 동작 분할 (Work Splitting)

애플리케이션의 동작을 작은 단위로 나누어 동시에 처리하도록 분할합니다. 이렇게 하면 한 번에 처리해야 하는 작업이 작아지므로, 렌더링 속도를 향상시킬 수 있습니다.

function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then((response) => {
      setData(response);
    });
  });

  return (
    <>
      {data ? (
          <>
            <ComponentA data={data} />
            <ComponentB />
            <ComponentC />
          </>
        ) : (
          <LoadingSpinner />
        )
      }
    </>
  );
}

위 예시에서 fetchData() 함수는 데이터를 가져오는 비동기 작업입니다. Concurrent Mode를 사용하면 fetchData() 함수가 완료되지 않은 상태에서도 컴포넌트들이 동시에 렌더링될 수 있습니다.

2. 우선순위 설정 (Priority Setting)

애플리케이션에서 중요도가 높은 작업에 우선순위를 부여하여 먼저 처리하도록 설정합니다. 이렇게 함으로써 사용자 경험을 향상시킬 수 있습니다.

function App() {
  const handleClick = () => {
    // 중요한 작업 처리
  };
  
  return (
    <>
      <button onClick={handleClick}>중요한 작업</button>
      <Suspense fallback={<LoadingSpinner />}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </>
  );
}

위 예시에서 <Suspense> 컴포넌트를 사용하여 중요한 작업을 먼저 처리하고, 나머지 컴포넌트들은 지연 로딩되도록 설정할 수 있습니다.

결론

React Concurrent Mode는 성능 개선을 위한 강력한 기능이며, 동작 분할과 우선순위 설정 등의 전략을 통해 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

React 공식 문서 #React #ConcurrentMode