📚 Reference

Concurrent Mode

• Concurrent Mode
• Concurrent Mode(동시성 모드)는 React 18부터 본격적으로 도입된 기능으로, React가 여러 작업을 동시에 처리하는 것처럼 보이게 만드는 렌더링 메커니즘이다.
• Fiber가 "작업을 쪼갤 수 있는 능력"이라면, Concurrent Mode는 그 능력을 활용해 "어떤 작업을 먼저 할지 결정하는 지능"이라고 이해하면 쉽다.

핵심 비유: 협업하는 요리사

• 과거의 React(Stack Reconciler)가 한 번에 한 가지 요리만 끝내야 다음 요리를 하는 요리사였다면, Concurrent Mode의 React는 다음과 같이 행동한다.
  • 비차단 렌더링 (Non-blocking Rendering): 메인 코스(무거운 리스트 렌더링)를 준비하다가도, 손님이 물을 달라고 하면(사용자 입력) 즉시 멈추고 물을 준 뒤 다시 요리로 돌아온다.
  • 우선순위 기반: 모든 주문을 접수 순서대로 처리하지 않고, '급한 것(입력, 애니메이션)'과 '나중에 해도 되는 것(데이터 로딩)'을 구분한다.

특징

Interruptible Rendering (중단 가능한 렌더링)

• 이전에는 한 번 render가 시작되면 끝날 때까지 브라우저의 메인 스레드를 꽉 잡고 있었다.