React
[ Frontend > React ]
[리액트 19] 6편. React 우선순위 관리
Carrot Yoon
2025-05-22
6
React 우선순위 관리
React 내부에서는 우선순위 관리를 위한 타입은 기능에 따라 Lane 우선순위, Scheduler 우선순위, Event 우선순위 3가지로 나뉩니다.
fiber 우선순위(LanePriority) : React-reconciler 패키지에 존재, ReactFiberLane.js 파일
스케줄링 운선순위(SchedulerPriority): Scheduler 패키지에 존재, SchedulerPriorities.js 파일
Event 우선순위(ReactEventPriorities): React-reconciler 패키지에 존재, ReactEventPriorities.js 파일
React 팀은 지속적으로 효율적인 렌더링 구현에 노력해왔으며, 그 중 2개의 매우 유명한 발표가 있습니다
2017년 Lin Clark이 fiber 아키텍처와 중단 가능한 렌더링을 소개했습니다.
2018년 Dan이 JSConf이 시간 분할(time slicing)과 비동기 렌더링(suspense) 등의 특성을 더 자세히 소개했습니다.
발표에서 보여준 중단 가능한 렌더링, 시간 분할(time slicing), 비동기 렌더링(suspense) 등의 특성들이 소스코드에서 구현되는 것은 모두 우선순위 관리에 의존합니다.
Lane
export const TotalLanes = 31;export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001;export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010;export const SyncLaneIndex: number = 1;export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000;export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000;export const SyncUpdateLanes: Lane = SyncLane | InputContinuousLane | DefaultLane;export const GestureLane: Lane = /* */ 0b0000000000000000000000001000000;const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000010000000;const TransitionLanes: Lanes = /* */ 0b0000000001111111111111100000000;const TransitionLane1: Lane = /* */ 0b0000000000000000000000100000000;const TransitionLane2: Lane = /* */ 0b0000000000000000000001000000000;const TransitionLane3: Lane = /* */ 0b0000000000000000000010000000000;const TransitionLane4: Lane = /* */ 0b0000000000000000000100000000000;const TransitionLane5: Lane = /* */ 0b0000000000000000001000000000000;const TransitionLane6: Lane = /* */ 0b0000000000000000010000000000000;const TransitionLane7: Lane = /* */ 0b0000000000000000100000000000000;const TransitionLane8: Lane = /* */ 0b0000000000000001000000000000000;const TransitionLane9: Lane = /* */ 0b0000000000000010000000000000000;const TransitionLane10: Lane = /* */ 0b0000000000000100000000000000000;const TransitionLane11: Lane = /* */ 0b0000000000001000000000000000000;const TransitionLane12: Lane = /* */ 0b0000000000010000000000000000000;const TransitionLane13: Lane = /* */ 0b0000000000100000000000000000000;const TransitionLane14: Lane = /* */ 0b0000000001000000000000000000000;const RetryLanes: Lanes = /* */ 0b0000011110000000000000000000000;const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000;const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000;const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000;const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000;export const SomeRetryLane: Lane = RetryLane1;export const SelectiveHydrationLane: Lane = /* */ 0b0000100000000000000000000000000;const NonIdleLanes: Lanes = /* */ 0b0000111111111111111111111111111;export const IdleHydrationLane: Lane = /* */ 0b0001000000000000000000000000000;export const IdleLane: Lane = /* */ 0b0010000000000000000000000000000;export const OffscreenLane: Lane = /* */ 0b0100000000000000000000000000000;export const DeferredLane: Lane = /* */ 0b1000000000000000000000000000000;// Any lane that might schedule an update. This is used to detect infinite// update loops, so it doesn't include hydration lanes or retries.export const UpdateLanes: Lanes = SyncLane | InputContinuousLane | DefaultLane | TransitionLanes;export const HydrationLanes = SyncHydrationLane | InputContinuousHydrationLane | DefaultHydrationLane | TransitionHydrationLane | SelectiveHydrationLane | IdleHydrationLane;let nextTransitionLane: Lane = TransitionLane1;let nextRetryLane: Lane = RetryLane1;Scheduler Prioirity
export type PriorityLevel = 0 | 1 | 2 | 3 | 4 | 5;export const NoPriority = 0;export const ImmediatePriority = 1;export const UserBlockingPriority = 2;export const NormalPriority = 3;export const LowPriority = 4;export const IdlePriority = 5;Event Priority
DOM 이벤트에 따라 처리할 우선순위를 Lane 모델에 따라 처리되도록 변경. Scheduler의 Priority로 변경하는 것도 EventPriority가 기준.
ReactDOMEventListener.js (getEventPriority 함수, resolveUpdatePriority 함수)
export opaque type EventPriority = Lane;export const NoEventPriority: EventPriority = NoLane;export const DiscreteEventPriority: EventPriority = SyncLane;export const ContinuousEventPriority: EventPriority = InputContinuousLane;export const DefaultEventPriority: EventPriority = DefaultLane;export const IdleEventPriority: EventPriority = IdleLane;export function eventPriorityToLane(updatePriority: EventPriority): Lane { return updatePriority;}export function lanesToEventPriority(lanes: Lanes): EventPriority { const lane = getHighestPriorityLane(lanes); if (!isHigherEventPriority(DiscreteEventPriority, lane)) { return DiscreteEventPriority; } if (!isHigherEventPriority(ContinuousEventPriority, lane)) { return ContinuousEventPriority; } if (includesNonIdleWork(lane)) { return DefaultEventPriority; } return IdleEventPriority;}1. Lane 개념
2. 리액트의 우선순위 체계
2.1 LanePriority
2.2 SchedulePriority
2.3 EventPriority
Event 별로 Lane 모델에 따라 알맞은 우선순위로 처리될 수 있도록 하는 우선순위. 또한 EventPriority 기준에 따라서 SchedulePriority도 함께 결정되어 스케줄링.