# [[React 18 Concurrent Features|React 18 Concurrent Features]]

## 📌 Brief Summary
React 18 Concurrent Features(동시성 기능)는 업데이트가 발생하는 시점과 방식을 제어하여 응답성을 희생하지 않으면서도 더 매끄러운 앱을 구축할 수 있게 해주는 기능이다 [1]. 이 렌더링 모델은 React가 렌더링 작업을 일시 중지(pause), 중단(interrupt), 재개(resume)할 수 있도록 허용하여 중요도에 따른 업데이트 우선순위 지정을 가능하게 한다 [2]. 대표적인 훅(Hook)인 `useTransition`과 `useDeferredValue`를 통해 느린 렌더링이 중요한 사용자 상호작용을 차단하지 못하게 방지할 수 있다 [3, 4].

## 📖 Core Content
*   **동시성 렌더링의 원리와 장점**
    동시성 렌더링은 무거운 필터 업데이트와 같은 작업은 지연시키면서, 클릭이나 타이핑 등 중요하고 즉각적인 상호작용을 우선적으로 처리할 수 있게 한다 [2]. 최신 버전의 React에서는 개발자가 수동으로 활성화할 필요 없이 기본 동작으로 내장되어 작동한다 [2]. 이 기능은 앱을 실제로 더 빠르게 만든다기보다는, 백그라운드 작업이 진행되는 동안 UI의 응답성을 유지하여 사용자가 느끼는 체감 속도(perceived speed)를 우선시한다 [4].
*   **`useTransition` (UX 응답성 우선순위 지정)**
    이 훅은 특정 업데이트를 '비긴급(non-urgent)'으로 표시하는 역할을 한다 [3]. 예를 들어 라이브 검색 결과나 대규모 데이터를 필터링할 때, 렌더링 처리가 느려지더라도 사용자의 타이핑이나 클릭 같은 중요한 상호작용이 차단되지 않는다 [3]. 처리 대기 중인 상태(`isPending`)를 활용하여 렌더링을 차단하지 않고 로딩 스피너나 스켈레톤 상태를 표시할 수 있다 [3].
*   **`useDeferredValue` (파생 데이터 처리 지연)**
    `useTransition`이 업데이트가 트리거되는 시점을 제어한다면, `useDeferredValue`는 무거운 값을 '읽는(read)' 시점을 제어한다 [4]. 사용자의 타이핑과 같은 UI 변경은 즉각적으로 반영하되, 파생된 무거운 연산이나 필터링 로직은 약간 지연시켜 적용해야 할 때 이상적인 방법이다 [4]. 주로 검색 상자, Typeahead 입력기, 실시간 폼 등에서 끊김 현상(jank)을 줄이는 데 사용된다 [4].
*   **모범 사례 및 프레임워크 생태계 지원**
    동시성 기능은 앱의 모든 곳이 아닌 '인터랙티브 뷰'에 한정하여 사용해야 한다 [4]. 데이터가 로드되는 동안 대체 UI를 표시하기 위해 `Suspense`와 결합하는 것이 권장되며, 구형 상태 관리 라이브러리나 렌더링을 차단하는 안티 패턴과 함께 사용하는 것은 피해야 한다 [4]. 2025년 기준 Next.js(App Router), Remix, Vite 기반 환경 등 대다수의 풀스택 프레임워크가 동시성 렌더링을 기본적으로 연동하고 지원한다 [5].

## 🔗 Knowledge Connections

### Related Concepts
- [[useTransition|useTransition]]
  - 연결 이유: React 18 동시성 기능의 핵심 훅으로, 비긴급 업데이트를 지연시키는 구체적인 구현체이다 [3].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 라이브 검색이나 필터링 시 렌더링 병목 현상을 방지하고, 어떻게 비긴급 작업과 긴급 상호작용(타이핑 등)을 분리하는지 이해할 수 있다 [3].
- [[useDeferredValue|useDeferredValue]]
  - 연결 이유: 값의 읽기를 지연시켜 UI 업데이트와 연산 부하를 분리하는 동시성 기능의 또 다른 핵심 훅이다 [4].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 즉각적인 UI 반영이 필요한 부분과 지연시켜도 무방한 무거운 계산(derived data)을 어떻게 나누어 처리하는지 알 수 있다 [4].
- Suspense
  - 연결 이유: 동시성 훅(`useTransition` 등)과 결합하여 백그라운드 렌더링이 진행되거나 데이터가 로드될 때 스켈레톤(fallback UI)을 보여줄 수 있도록 설계된 기능이다 [4].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 지연 중인 렌더링 상태에서 사용자의 경험(UX)을 어떻게 부드럽게 이어갈 수 있는지 이해할 수 있다 [4].

### Deeper Research Questions
- `useTransition`과 `useDeferredValue`를 사용할 때 React 내부적으로 메인 스레드의 유휴 시간(idle time)을 어떻게 판단하여 작업을 중단 및 재개하는가?
- 구형 상태 관리 라이브러리나 클래스 기반 컴포넌트를 동시성 기능과 혼용했을 때 구체적으로 어떤 렌더링 차단 충돌이나 예외가 발생하는가?
- 동시성 렌더링을 적용했을 때 Interaction to Next Paint (INP)나 Total Blocking Time (TBT)과 같은 Core Web Vitals 지표가 수치상으로 어떻게 변화하는가?
- Next.js의 App Router와 결합된 동시성 렌더링에서, 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트 간의 렌더링 우선순위는 어떻게 관리되는가?
- `isPending` 속성을 활용해 대체 UI(스켈레톤, 스피너)를 구현할 때 시각적 깜빡임을 최소화하기 위한 이상적인 지연 시간 설계 패턴은 무엇인가?

### Practical Application Contexts
- **Implementation:** 라이브 검색 결과 렌더링이나 수천 개의 항목이 있는 데이터 목록을 필터링할 때 `useTransition`을 도입하여 입력창의 입력이 지연되지 않도록 구현한다 [3].
- **System Design:** 검색 상자, Typeahead 입력기, 또는 실시간 폼을 설계할 때 즉각적인 입력 렌더링과 연산이 무거운 데이터 렌더링 간의 영향을 차단하기 위해 `useDeferredValue` 아키텍처를 도입한다 [4].
- **Operation / Maintenance:** Chrome DevTools의 Performance 탭과 Web Vitals 지표를 통해 긴 작업(Long tasks)이 동시성 렌더링 덕분에 성공적으로 쪼개져 메인 스레드 차단을 줄였는지 지속적으로 모니터링한다 [6, 7].
- **Learning Path:** React의 기본 렌더링 모델(props 및 state 변경에 따른 리렌더링 트리거)을 명확히 이해한 다음, 동시성 기능을 통해 이러한 렌더링 사이클이 어떻게 일시 중지되고 재개될 수 있는지 학습을 확장한다 [2, 8].
- **My Project Relevance:** 현재 진행 중인 프로젝트에서 데이터가 많은 차트나 테이블 필터링 시 UI가 끊기는(Jank) 현상이 있다면, 이 동시성 기능 훅을 도입하여 즉각적인 클릭/입력 응답성을 확보할 수 있다 [3, 4].

### Adjacent Topics
- [[React Performance Optimization|React Performance Optimization]]
  - 확장 방향: 동시성 렌더링 외에도 불필요한 리렌더링 자체를 막는 `React.memo`, `useCallback`, `useMemo` 활용법과 같은 다양한 React 성능 최적화 기법 전반으로 지식을 확장할 수 있다 [9-11].
- [[Server Components|Server Components]]
  - 확장 방향: Next.js에서 동시성 기능과 함께 성능 향상의 양대 축을 이루는 기능으로, 클라이언트 측 JavaScript를 전송하지 않고 서버에서 렌더링을 완료하여 번들 크기를 줄이는 전략을 학습할 수 있다 [12, 13].

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