← 개발 기록

React Concurrent Mode Deep Dive

개요

Concurrent 모드는 React 애플리케이션의 응답성을 향상시키기 위해 설계된 새로운 렌더링 패러다임입니다. 이는 React의 렌더링 프로세스를 더 유연하고 중단 가능하게 만들어, 사용자 경험을 개선합니다.

기본 개념

중단 가능한 렌더링: React는 렌더링 작업을 작은 단위로 나누고 필요에 따라 중단하거나 재개할 수 있습니다.
우선순위 기반 렌더링: 다양한 업데이트에 우선순위를 할당하여 중요한 업데이트를 먼저 처리합니다.
시간 분할(Time Slicing): 렌더링 작업을 여러 프레임에 걸쳐 분산시켜 메인 스레드 차단을 방지합니다.

작동 원리

렌더 단계와 커밋 단계 분리:
- 렌더 단계: 가상 DOM을 계산하고 변경사항을 결정합니다 (중단 가능).
- 커밋 단계: 실제 DOM에 변경사항을 적용합니다 (중단 불가능).
Fiber 아키텍처:
- 렌더링 작업을 작은 단위(fiber)로 나누어 관리합니다.
- 각 fiber는 중단 지점이 될 수 있으며, React는 여기서 작업을 일시 중지하고 다른 작업을 처리할 수 있습니다.
이중 버퍼링:
- 현재 UI 상태와 작업 중인 상태를 별도로 관리합니다.
- 이를 통해 불완전한 렌더링 결과가 사용자에게 보이는 것을 방지합니다.

주요 기능

useTransition:
- 우선순위가 낮은 상태 업데이트를 표시하여 UI의 응답성을 유지합니다.
```
const [isPending, startTransition] = useTransition();
startTransition(() => {
  setCount(count + 1);
});
```
useDeferredValue:
- 덜 중요한 부분의 업데이트를 지연시켜 중요한 업데이트에 리소스를 집중합니다.
```
const deferredValue = useDeferredValue(value);
```
<Suspense>:
- 데이터 로딩 중 폴백 UI를 표시하고, 여러 컴포넌트의 로딩을 조율합니다.
```
<Suspense fallback={<Spinner />}>
  <ComponentThatSuspends />
</Suspense>
```

이점

향상된 사용자 경험: 중요한 업데이트를 빠르게 반영하여 앱이 더 반응적으로 느껴집니다.
복잡한 UI 최적화: 대규모 리스트나 복잡한 데이터 시각화에서 성능 향상을 제공합니다.
더 나은 에러 처리: Suspense를 통해 로딩 상태와 에러 상태를 더 우아하게 처리할 수 있습니다.
코드 분할의 용이성: 동적 임포트와 Suspense를 결합하여 효과적인 코드 분할이 가능합니다.

사용 사례

대규모 데이터 리스트: 사용자 입력에 따라 대량의 데이터를 필터링하고 표시할 때.
실시간 데이터 업데이트: 여러 소스에서 동시에 데이터를 받아 표시해야 할 때.
복잡한 애니메이션: 여러 요소가 동시에 애니메이션되는 복잡한 UI에서.
점진적 로딩: 대규모 애플리케이션에서 필요한 부분만 점진적으로 로드할 때.

주의사항

Concurrent 모드는 아직 실험적 기능이며, 안정화 과정에 있습니다.
기존 코드와의 호환성 문제가 있을 수 있으므로 마이그레이션 시 주의가 필요합니다.
모든 상황에서 Concurrent 모드가 필요한 것은 아니며, 애플리케이션의 요구사항에 따라 선택적으로 사용해야 합니다.

Concurrent 모드는 React의 미래이며, 복잡한 UI를 더 효율적으로 구현할 수 있는 강력한 도구입니다. 그러나 이를 효과적으로 활용하기 위해서는 React의 내부 작동 원리와 새로운 패러다임에 대한 깊은 이해가 필요합니다.