Concurrent Mode는 React v18부터 도입된 새로운 기능으로, 자바스크립트의 비동기 이벤트 처리를 보다 효율적으로 처리할 수 있게 해줍니다. 이전의 React 메인 스레드는 한 번에 하나의 작업만 처리할 수 있었는데, Concurrent Mode를 이용하면 여러 작업을 동시에 처리할 수 있게 됩니다.

Concurrent Mode의 장점

Concurrent Mode를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

1. 사용자 경험 향상: 사용자는 더 빠른 응답 속도와 부드러운 화면 전환을 경험할 수 있습니다. 이는 애플리케이션의 성능을 개선하여 사용자들이 더 나은 사용 경험을 얻을 수 있게 합니다.

2. 작업 우선순위 설정: Concurrent Mode에서는 작업에 우선순위를 지정할 수 있습니다. 예를 들어, 화면에 표시되는 중요한 내용을 우선적으로 처리하여 사용자가 핵심적인 정보를 빠르게 확인할 수 있도록 할 수 있습니다.

Concurrent Mode의 동작 방식

Concurrent Mode를 사용하면 React는 작업을 여러 “우선순위 레이어”로 분리합니다. 각 레이어는 우선순위가 다르며, 서로 다른 스케줄링 알고리즘을 적용합니다. 이렇게 함으로써, 우선순위가 낮은 작업이 우선순위가 높은 작업을 블로킹하지 않고 실행될 수 있게 됩니다.

React의 Concurrent Mode는 브라우저의 requestIdleCallback API를 사용하여 여러 작업을 동시에 처리할 수 있습니다. 이를 통해 사용자 입력과 같은 중요한 이벤트를 우선적으로 처리하고, 남은 시간을 가진 idle 상태에서 비동기 작업을 수행할 수 있습니다.

Concurrent Mode 적용하기

Concurrent Mode를 사용하기 위해서는 다음과 같은 절차를 따릅니다.

1. React v18 이상으로 업그레이드합니다.
2. 아래 예시와 같이 Concurrent Mode를 사용할 컴포넌트를 unstable_ConcurrentMode 컴포넌트로 감싸줍니다.

import { unstable_ConcurrentMode } from 'react';

function App() {
  return (
    <unstable_ConcurrentMode>
      {/* 비동기 작업을 수행할 컴포넌트들을 작성 */}
    </unstable_ConcurrentMode>
  );
}

1. 작업의 우선순위에 따라 React Scheduler API를 사용하여 작업을 스케줄링합니다.

import { unstable_scheduleCallback } from 'scheduler';

unstable_scheduleCallback(() => {
  // 비동기 작업 수행
});

적응형 UI와 Concurrent Mode

Concurrent Mode는 적응형 UI(Adaptive UI)와 함께 사용되면 더욱 강력한 기능을 발휘합니다. 적응형 UI는 사용자의 환경에 맞게 UI를 동적으로 조정하는 것을 의미하는데, Concurrent Mode를 통해 다양한 화면 크기와 네트워크 상태에 대응하는 적응형 UI를 개발할 수 있습니다.

마무리

Concurrent Mode를 사용하면 React 애플리케이션의 비동기 이벤트 처리를 보다 효율적으로 할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 성능을 개선할 수 있습니다. 자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

React 공식 문서

#hashtags #ConcurrentMode