# [[Concurrent Rendering in React 18+|Concurrent Rendering in React 18+]]

## 📌 Brief Summary
React 18+의 동시성 렌더링(Concurrent Rendering)은 React가 렌더링 작업을 일시 중지, 중단 및 재개할 수 있도록 하는 강력한 기능입니다 [1]. 이를 통해 개발자는 업데이트 발생 시기와 방식을 세밀하게 제어할 수 있으며, 사용자의 상호작용성을 저하시키지 않으면서도 화면이 멈추지 않는 더 부드럽고 반응성 높은 애플리케이션을 구축할 수 있습니다 [1, 2].

## 📖 Core Content

**동시성 렌더링의 개념과 이점**
*   React 18부터 도입된 동시성 기능은 렌더링 작업의 우선순위를 동적으로 지정할 수 있게 해줍니다. 렌더링 작업을 차단하지 않고, 느린 데이터 필터링 업데이트 등을 지연시키는 동시에 클릭이나 타이핑과 같은 중요한 사용자 상호작용에 즉각적으로 반응하도록 렌더링을 일시 중지하거나 재개할 수 있습니다 [1]. 이는 최신 React 버전의 기본 동작으로 내장되어 있습니다 [1].

**주요 동시성 훅(Hooks)**
*   **`useTransition`:** 특정 상태 업데이트를 '긴급하지 않은(non-urgent)' 것으로 표시하여 지연시킬 수 있는 훅입니다 [3]. 실시간 검색 결과 표시, 대규모 데이터 세트 필터링, 복잡한 차트 및 테이블 렌더링과 같은 무거운 작업이 사용자의 즉각적인 상호작용을 차단하지 못하게 합니다 [3]. 제공되는 `isPending` 상태를 활용하여 메인 스레드를 차단하지 않고 로딩 스피너나 스켈레톤 UI를 표시할 수 있습니다 [3].
*   **`useDeferredValue`:** `useTransition`이 업데이트를 트리거하는 시점을 제어한다면, `useDeferredValue`는 비용이 많이 드는 값을 *읽고 적용하는 시점*을 지연시킵니다 [4]. 검색창의 입력 값 등 UI 변경 사항은 즉시 반영하면서, 파생되는 무거운 계산 로직은 약간 지연시켜 실시간 폼이나 인터페이스에서의 화면 끊김(Jank) 현상을 줄여줍니다 [4].

**사용 모범 사례 및 프레임워크 지원**
*   동시성 기능은 앱의 모든 곳이 아닌 '상호작용이 집중된 뷰'에 전략적으로 사용해야 합니다 [4]. 데이터가 로드되는 동안 대체 UI를 자연스럽게 보여주기 위해 `Suspense`와 결합하는 것이 권장됩니다 [4]. 
*   주의할 점은 구식 상태 관리 라이브러리나 렌더링을 차단하는 패턴(예: 가드 로직이 없는 오래된 클래스 컴포넌트)과 혼용해서는 안 된다는 것입니다 [4]. 
*   이러한 기능들은 연산 속도 자체를 물리적으로 높이는 것이 아니라, 백그라운드에서 작업이 계속되는 동안 UI가 반응하도록 유지함으로써 '체감 속도(perceived speed)'를 우선시하는 도구입니다 [4].
*   2025년 기준 Next.js(App Router), Remix, Vite + React 18 등 대부분의 최신 풀스택 프레임워크는 기본적으로 이 동시성 렌더링을 완전히 통합하여 지원하고 있습니다 [5].

## 🔗 Knowledge Connections

### Related Concepts

- [[useTransition|useTransition]]
  - 연결 이유: 동시성 렌더링 환경에서 특정 상태 업데이트를 '긴급하지 않은 작업'으로 명시적으로 분류하기 위해 사용되는 핵심 훅입니다 [3].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 상태 업데이트의 우선순위를 낮추어 사용자 입력에 대한 메인 스레드 차단을 방지하는 구체적인 제어 방법.

- [[useDeferredValue|useDeferredValue]]
  - 연결 이유: 연산 비용이 높은 값의 화면 적용 시점을 늦추어 UI의 즉각적인 체감 반응성을 향상시키는 동시성 기능이기 때문입니다 [4].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 사용자 입력(타이핑 등)의 즉각적인 반영과 무거운 파생 데이터 렌더링 간의 처리 시점을 분리하는 메커니즘.

- Suspense
  - 연결 이유: 동시성 훅(`useTransition` 등)과 결합하여 비동기 처리나 지연된 렌더링이 완료되기 전까지 자연스러운 대체 UI(Fallback UI)를 표시하는 역할을 합니다 [4].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 비동기 데이터 로딩 과정에서 동시성 렌더링을 활용한 부드러운 사용자 경험(UX) 설계 방식.

### Deeper Research Questions

- React의 동시성 렌더링 엔진은 내부적으로 긴급 업데이트와 지연 업데이트의 우선순위를 어떤 스케줄링 알고리즘으로 관리하는가?
- `useTransition`과 `useDeferredValue`를 복잡한 단일 컴포넌트 내에서 함께 사용할 때 발생할 수 있는 렌더링 엣지 케이스나 성능적 트레이드오프는 무엇인가?
- 구식 상태 관리 라이브러리(Context API를 잘못 사용하는 경우 등)가 React 18의 동시성 렌더링 패턴을 방해할 때 발생하는 정확한 기술적 원리(예: Tearing 현상)는 무엇인가?
- 동시성 렌더링의 도입이 브라우저의 INP(Interaction to Next Paint)와 TBT(Total Blocking Time) 지표 최적화에 수학적으로 어떤 연관성을 가지는가?
- 동시성 렌더링으로 인해 렌더링 트리가 중단(Interrupt)되고 폐기된 후 다시 시작될 때, 불필요한 메모리 누수를 방지하기 위한 React의 내부 최적화 메커니즘은 무엇인가?

### Practical Application Contexts

- **Implementation:** 라이브 검색 결과창, 대규모 데이터 세트 필터링 기능 구현 시 `useTransition`과 `useDeferredValue`를 적극 활용하여 입력 중 발생하는 화면 멈춤(Jank) 방지 [3, 4].
- **System Design:** 아키텍처 설계 시 기본적으로 동시성 렌더링이 활성화된 Next.js App Router나 Remix와 같은 최신 React 프레임워크를 도입하여 반응성 이점을 극대화 [5].
- **Operation / Maintenance:** 기존 레거시 코드베이스에서 렌더링을 차단하는 요소(오래된 클래스 컴포넌트 등)를 리팩토링하고, 동시성 기능이 충돌 없이 작동할 수 있도록 유지보수 환경 개선 [4].
- **Learning Path:** 전통적인 '동기적 렌더링(Synchronous Rendering)' 모델이 가진 한계를 벗어나, 작업 단위의 일시 중지와 재개가 가능한 렌더링 패러다임으로 개발자의 사고 방식을 전환.
- **My Project Relevance:** 현재 진행 중인 서비스 내 무거운 대시보드 화면이나 복잡한 검색 인터페이스에서 사용자가 직접 체감하는 '인식 속도(Perceived Speed)'를 최적화하는 아키텍처 개선 지표로 활용 [3, 4].

### Adjacent Topics

- [[React Server Components|React Server Components]]
  - 확장 방향: 동시성 렌더링과 함께 Next.js App Router 환경의 핵심 성능 최적화 축을 이루며, 클라이언트 측 자바스크립트 번들을 획기적으로 줄여주는 서버 컴포넌트의 렌더링 원리 탐구 [5, 6].

- Core Web Vitals (INP/TBT)
  - 확장 방향: 동시성 렌더링 기능 적용이 웹의 핵심 반응성 지표인 INP 및 TBT를 어떻게 개선하는지 실제 성능 측정 툴(Chrome DevTools, Lighthouse) 데이터와 연계하여 조사 [7-9].

---
*Last updated: 2026-04-30*