2nd/10_Wiki/Topics/React 동시성 훅 (useTransition, useDeferredValue).md

React 동시성 훅 (useTransition, useDeferredValue)

📌 Brief Summary

React의 동시성 훅(Concurrent Hooks)인 useTransition과 useDeferredValue는 긴급한 업데이트와 비긴급 업데이트를 분리하여 UI의 응답성을 유지하는 데 사용되는 도구입니다 [1]. 이 훅들은 연산 속도 자체를 높이는 것이 아니라 무거운 연산이 메인 스레드를 차단하는 것을 방지함으로써 애플리케이션의 체감 속도를 높여줍니다 [2]. 결과적으로 사용자 피드백을 즉각적으로 처리하게 하여 INP(Interaction to Next Paint)와 같은 성능 지표를 개선하는 데 핵심적인 역할을 합니다 [3].

📖 Core Content

• 동시성 렌더링의 원리 및 효과: React의 동시성 기능은 타이핑이나 클릭 같은 '긴급한 상호작용'과 대규모 리스트 필터링이나 차트 재계산 같은 '비긴급 업데이트'를 분리합니다 [1]. 이 기능은 React의 우선순위 시스템인 'Lane 모델'을 기반으로 작동하며, 특정 업데이트를 낮은 우선순위로 표시하여 UI의 응답성을 유지할 수 있게 합니다 [4]. 이 훅들을 사용하면 메인 스레드가 긴급한 사용자 상호작용에 즉시 대응할 수 있으므로, INP 점수를 낮추는 데 직접적으로 기여합니다 [3].

• useTransition (비차단 상태 업데이트): useTransition은 개발자가 상태 업데이트 코드를 직접 제어할 수 있을 때 사용합니다 [3]. 상태 변경 함수(set[[State|State]] 등)를 [[startTransition|startTransition]]으로 감싸면, 해당 업데이트를 낮은 우선순위로 처리하여 메인 스레드가 여유로워질 때까지 연산을 지연시킵니다 [1, 3].

  • 주로 사용자가 타이핑할 때마다 검색 결과를 필터링하는 패턴이나, 데이터가 많은 애플리케이션에서의 탭 전환 등에 매우 효과적입니다 [1].
  • isPending이라는 플래그를 함께 제공하여, 무거운 연산이 백그라운드에서 실행되는 동안 사용자에게 즉각적인 시각적 피드백(예: 로딩 상태)을 줄 수 있습니다 [5].

• useDeferredValue (무거운 렌더링 지연): useDeferredValue는 외부 스토어나 부모 컴포넌트에서 props로 전달받는 등 상태 업데이트 코드를 직접 제어할 수 없을 때 상태 값 자체를 감싸기 위해 사용합니다 [3, 5].

  • 무거운 렌더링을 처리하는 동안 UI가 멈추는(freezing) 현상을 방지하기 위해, React는 새로운 결과가 준비될 때까지 화면에 이전 결과를 계속 표시합니다 [3].

🔗 Knowledge Connections

• Related Topics: React Fiber Architecture, Lane Model, INP (Interaction to Next Paint)
• Projects/Contexts: 검색어 입력 필터링 (Search-as-you-type), 데이터 집약적 대시보드의 탭 전환
• Contradictions/Notes: 동시성 훅(useTransition)과 디바운싱(Debouncing)은 불필요한 작업을 줄여준다는 공통점이 있지만 목적이 다릅니다. 컴포넌트 수준에서 UI 업데이트를 지연시키는 데는 React 네이티브 방식인 useTransition이 더 적합한 반면, 잦은 API 호출 빈도를 낮추는 데는 여전히 디바운싱 기법을 사용하는 것이 최선입니다 [6].

---

Last updated: 2026-04-25