Concurrent Mode는 React의 중요한 새로운 기능 중 하나로, 사용자 경험과 애플리케이션 성능을 향상시키는 동시에 개발자가 비동기적으로 작업을 처리할 수 있는 방식을 제공합니다. 기존의 React는 한 번에 하나의 작업만을 처리하는 “동기적인” 방식으로 동작했지만, Concurrent Mode는 다중 작업을 동시에 수행할 수 있도록 해주는 “비동기적인” 방식입니다.

Concurrent Mode의 주요 특징

1. 더 나은 사용자 경험 (Better User Experience) Concurrent Mode는 React 애플리케이션의 반응성을 높여 주어 더 나은 사용자 경험을 제공합니다. 예를 들어, 복잡한 작업이나 느린 네트워크 연결로 인해 화면이 멈추거나 응답이 없는 상황을 방지할 수 있습니다.

2. 우선 순위 조정 (Priority Scheduling) Concurrent Mode에서는 작업에 우선 순위를 지정하여 중요한 작업이 높은 우선 순위를 가지고 먼저 수행되도록 할 수 있습니다. 이를 통해 사용자와 상호작용하는 작업이나 화면을 렌더링하는 작업에 더 높은 우선 순위를 부여하여 사용자 경험을 향상시킬 수 있습니다.

3. 부분 렌더링 (Partial Rendering) Concurrent Mode에서는 화면을 부분적으로 업데이트하는 부분 렌더링이 가능합니다. 이를 통해 변경된 부분만 업데이트하고 나머지 부분은 그대로 유지함으로써 성능을 향상시킬 수 있습니다.

Concurrent Mode로 애플리케이션 개발하기

Concurrent Mode를 활용한 자바스크립트 애플리케이션 개발은 기존의 React 애플리케이션과 비슷한 방식으로 진행됩니다. 다만, Concurrent Mode에서는 작업의 우선 순위를 지정하는 것과 부분 렌더링을 활용하는 것이 주요한 차이점입니다.

예를 들어, 우선 순위가 높은 작업을 처리하기 위해 unstable_scheduleCallback 함수를 사용할 수 있습니다. 이를 통해 우선 순위가 높은 작업이나 사용자와 상호작용하는 작업을 비동기적으로 처리할 수 있습니다.

또한, 부분 렌더링을 활용하기 위해서는 unstable_createRoot 함수를 사용하여 Concurrent Mode에서 렌더링할 루트 엘리먼트를 생성한 후, ReactDOM.unstable_createSyncRoot를 호출하여 동기적으로 렌더링할 수 있는 부분을 지정할 수 있습니다.

이 외에도 Concurrent Mode에서는 Suspense라는 새로운 컴포넌트를 사용하여 비동기 데이터 로딩 또는 코드 분할과 같은 작업을 처리할 수 있습니다.

Concurrent Mode를 활용한 자바스크립트 애플리케이션 개발은 React 공식 문서 및 예제 코드를 참고하는 것이 좋습니다.

더 많은 내용을 알아보기 위해서는 React 공식 문서를 참고해주세요.

#hashtags #ConcurrentMode