<React> React 18부터 적용된 React Concurrnet Mode

useTransition, useDefferedValue

React Concurrent Mode는 React가 UI를 더육 효율적으로 렌더링하고, 끊김없이 응답성을 유지할 수 있도록 도와주는 중요한 기능이다.

React 18부터 도입된 기능이다.
React 18에서 Concurrent Mode는 기본적으로 활성화되는 Concurrent Features의 형태로 제공된다.

React 18부터 Concurrent Mode는 기본적으로 활성화됩니다. 즉, 특별히 모드를 설정하지 않아도 React 18의 모든 기능을 사용할 수 있습니다. React 17에서는 이러한 기능을 사용할 수 없으므로, Concurrent Mode와 관련된 기능을 사용하려면 React 18로 업그레이드해야 합니다.

응답성이란?

React에서 "응답성"이라는 개념은 주로 사용자 인터페이스(UI)가 사용자 입력에 빠르고 효율적으로 반응하는 능력을 의미합니다. 이는 다음과 같은 요소들로 구성됩니다.

1. 상태 관리: React는 컴포넌트의 상태(state)를 관리하여 UI가 상태 변화에 따라 자동으로 업데이트되도록 합니다. 이를 통해 사용자가 인터페이스와 상호작용할 때 즉각적인 피드백을 받을 수 있습니다.

2. 가상 DOM: React는 가상 DOM을 사용하여 실제 DOM과의 상호작용을 최적화합니다. 변경 사항이 있을 때, React는 가상 DOM에서 변경을 계산하고, 최소한의 실제 DOM 업데이트만 수행하여 성능을 향상시킵니다.

3. 비동기 처리: React는 비동기 작업(예: API 호출)을 지원하여 UI가 블로킹되지 않고 부드럽게 작동할 수 있도록 합니다. 이는 사용자 경험을 향상시키는 중요한 요소입니다.

4. 컴포넌트 기반 구조: React는 컴포넌트 기반 구조를 통해 UI를 재사용 가능하고 관리하기 쉽게 만듭니다. 각 컴포넌트는 독립적으로 상태를 관리하고, 변경 사항에 따라 자동으로 업데이트됩니다.
이러한 요소들이 결합되어 React 애플리케이션은 응답성이 뛰어난 사용자 경험을 제공할 수 있습니다.

도입 배경

기존의 동기적 렌더링 방식을 대체할 수 있는 비동기 렌더링 기반의 구조가 도입되었다.

React 18에서 Concurrent Mode를 활성화하는 주요 변경사항

1. 자동 배치(Automatic Batching):

• 여러 상태 업데이트를 하나로 묶어 처리하여 리렌더링을 최소화합니다.
• 이전에는 이벤트 핸들러 내부에서만 배치가 이루어졌으나, React 18에서는 모든 비동기 작업(예: setTimeout, fetch)에서도 배치가 적용됩니다.

2. useTransition 및 startTransition:

• 낮은 우선순위 작업(예: 데이터 로딩)을 관리하기 위한 API입니다.
• 사용자의 입력과 같은 중요한 작업은 높은 우선순위로 처리됩니다.

3. Suspense 개선:

• React 18에서는 Suspense가 서버 사이드 렌더링(SSR)과 함께 사용할 수 있도록 확장되었습니다.
• 데이터 로딩을 더 효율적으로 관리할 수 있습니다.

4. Streaming Server-Side Rendering (SSR):

• React 18은 서버에서 UI를 스트리밍 방식으로 점진적으로 렌더링하여 초기 로드 시간을 개선합니다.

React Concurrent Mode 주요 특징

React Concurrent Mode는 React의 렌더링 엔진(Reconciler)을 기반으로 시간 분할(Time Slicing)을 구현하여 동작합니다.

전통적으로 React는 컴포넌트 트리를 동기적(Synchronous)으로 렌더링합니다.

즉, 렌더링 작업이 시작되면 모든 작업이 끝날 때까지 멈추지 않고 진행됩니다.

하지만 이렇게 하면 렌더링 작업이 오래 걸리는 경우 UI가 멈추거나 사용자가 입력해도 반응하지 않는 버벅임(Block UI) 문제가 발생할 수 있습니다.

Concurrent Mode에서는 렌더링 작업을 우선순위에 따라 쪼개고 나눠서 실행함으로써 UI가 항상 부드럽고 응답성이 유지되도록 설계되었습니다.

시간 분할 (Time Slicing)

작업을 쪼개서 렌더링하고, 중요한 작업이 있으면 중단했다가 나중에 이어서 처리합니다.

React는 작업을 작은 단위로 나눠 수행하며, 중요한 작업(예: 사용자 입력)과 덜 중요한 작업(예: 데이터 렌더링)을 동시에 관리합니다.

React는 사용자 이벤트를 감지하고 우선순위를 다시 구성한다.

React는 이를 통해 사용자 경험(UX)을 개선하고, 중요도가 높은 작업이 먼저 처리되도록 조율합니다.

이 동작은 React의 내부 렌더링 엔진에서 이루어지며, 우선순위 기반 작업 관리가 핵심입니다.

우선순위 관리

작업마다 우선순위를 부여하고, 높은 우선순위 작업을 먼저 처리하여 사용자 경험을 개선합니다.

자동 조정 가능한 작업 플로우

React는 시스템 상태를 감지하여 작업 속도를 자동으로 조정합니다. 예를 들어, CPU가 바쁘거나 브라우저가 느린 환경에서는 작업을 더 천천히 처리하여 시스템에 부담을 덜 줍니다.

React에서 사용자 이벤트와 우선순위 재구성

React Concurrent Mode에서는 사용자 이벤트를 감지하고, 이를 기반으로 우선순위를 다시 구성합니다.

React는 이를 통해 사용자 경험(UX)을 개선하고, 중요도가 높은 작업이 먼저 처리되도록 조율합니다. 이 동작은 React의 내부 렌더링 엔진에서 이루어지며, 우선순위 기반 작업 관리가 핵심입니다.

React는 다음과 같은 방식으로 사용자 이벤트를 감지하고, 작업 우선순위를 조정합니다:

1. 우선순위가 할당되는 사용자 이벤트

React는 다양한 사용자 이벤트에 대해 각기 다른 우선순위를 부여합니다. 대표적인 예는 다음과 같다.

🔥 높은 우선순위 (즉시 처리)
클릭 이벤트
키보드 입력
포커스 변경
중간 우선순위
스크롤
애니메이션

💧 낮은 우선순위 (배경 작업)
데이터 로딩
화면 갱신 (화면 렌더링)

React는 사용자가 즉시 반응을 기대하는 이벤트를 높은 우선순위로 처리하고, 데이터 렌더링과 같은 작업은 뒤로 미루거나 나눠서 처리합니다.

이를 통해 사용자는 끊김 없는 UI 응답성을 경험할 수 있습니다.

2. 우선순위 기반 렌더링 흐름

React Concurrent Mode에서는 이벤트 발생 시 다음 단계를 통해 우선순위를 재구성합니다.

1. 이벤트 감지
   React는 브라우저의 이벤트 루프에서 사용자 입력(예: 클릭, 키보드 입력)을 감지합니다.

2. 우선순위 할당
   감지된 이벤트에 따라 React는 작업에 적절한 우선순위를 부여합니다.

   • React는 작업 우선순위를 내부적으로 관리하기 위해 Scheduler를 사용합니다.
   • Scheduler는 현재 진행 중인 작업을 중단하거나 우선순위를 변경할 수 있습니다.

3. 작업 큐 조정
   중요한 작업(예: 클릭 이벤트)부터 먼저 처리하고, 덜 중요한 작업(예: 배경 데이터 로드)은 나중에 처리하거나, 나눠서 실행합니다.

4. 렌더링 중단 및 재개
   React는 현재 진행 중인 렌더링 작업을 일시적으로 중단(Pause)하고, 높은 우선순위 작업을 처리한 뒤 다시 작업을 재개(Resume)합니다.

요약

React Concurrent Mode는 사용자 이벤트를 감지하고, 이를 기반으로 우선순위를 재구성하여 중요한 작업을 먼저 처리합니다.

이를 통해:
1. 사용자 입력은 즉각 반영되며,
2. 렌더링 작업은 백그라운드에서 효율적으로 진행됩니다.

React Scheduler와 useTransition 같은 API를 활용하면, 복잡한 애플리케이션에서도 응답성이 뛰어난 UI를 구현할 수 있습니다.

전체 요약

React Concurrent Mode는 복잡한 애플리케이션의 성능과 사용자 경험(UX)을 개선하기 위해 React 18에서 새롭게 도입된 Concurrent Features를 통칭합니다.

React 내부에서 이벤트 우선순위를 자동으로 관리해, UI가 멈추지 않고 부드럽게 동작하도록 돕고, 개발자가 보다 효율적으로 작업 흐름을 관리할 수 있도록 설계되었습니다.