Files
2nd/10_Wiki/Topics/Time Slicing.md
T

2.2 KiB

Time Slicing

📌 Brief Summary

Time Slicing(타임 슬라이싱)은 React에서 대규모 렌더링 업데이트 작업을 더 작은 단위(청크)로 분할하여 UI의 반응성을 유지하는 최적화 기법입니다 [1, 2]. 이 기능을 통해 React는 렌더링 작업을 일시 중지하고 사용자 입력 등 우선순위가 높은 작업을 위해 브라우저에 제어권을 넘긴 후, 중단된 위치부터 렌더링을 다시 재개할 수 있습니다 [3]. 결과적으로 동시성 렌더링(Concurrent Rendering)과 함께 작동하여 복잡한 업데이트 상황에서도 애플리케이션이 멈추지 않고 원활하게 동작하도록 보장합니다 [4].

📖 Core Content

  • 작업의 분할과 제어권 양보 (Yielding): Time Slicing은 긴 시간이 소요되는 대규모 업데이트를 더 작은 청크(chunk) 단위로 쪼개어 처리합니다 [1, 2]. 이를 통해 React는 렌더링 작업을 수행하는 도중에 브라우저로 제어권을 양보(yield)할 수 있어 메인 스레드가 장시간 차단되는 것을 방지합니다 [2].
  • 우선순위 기반 렌더링 (Lane-Based Priority): 이 과정은 React의 Fiber 아키텍처 내에서 "Lanes(레인)"라고 불리는 우선순위 기반 시스템을 통해 관리됩니다 [3]. 클릭 이벤트나 타이핑 같은 우선순위가 높은 작업이 발생하면, 진행 중이던 렌더링을 일시 중지하고 긴급한 작업을 먼저 처리한 뒤 남은 렌더링을 이어서 진행합니다 [3].
  • 성능 및 UI 반응성 향상: Time Slicing은 동시성 렌더링(Concurrent Rendering) 및 점진적 렌더링(Incremental Rendering) 아키텍처와 긴밀하게 결합되어 작동합니다 [4]. 이들의 조합은 복잡하고 무거운 UI 업데이트가 수행되는 동안에도 앱의 응답성을 유지시켜 사용자 경험을 크게 향상시킵니다 [4].

🔗 Knowledge Connections


Last updated: 2026-04-25