📚 Reference

📜 Chapter

Fiber

Suspense

Streaming SSR

Server Component

concurrency (동시성)

useTransition

useDeferredValue

Next.js

Concurrent Rendering

• Concurrent Rendering
• 동시성 렌더링
• React가 렌더링을 “중단하고, 재개하고, 우선순위를 조절할 수 있게 만든 새로운 렌더링 엔진 구조”
• React가 이제 ‘한 번에 한 일만’ 하는 게 아니라, 여러 렌더링 작업을 동시에 관리하면서 더 중요한 걸 먼저 처리할 수 있다.
• React가 이제 “한 번에 전부 렌더링하지 않고 더 중용한 작업을 먼저 수행하면서 필요한 부분만 병렬로 그리는” 새로운 렌더링 방식이다.
• Concurrent Rendering 덕분에 Suspense, Streaming SSR, RSC, useTransition 같은 현대 React 기능들이 가능해진 것이다.

기존 React의 한계

• 이전 React(17 이하)는 이렇게 동작했다.

[render() 실행] → [모든 컴포넌트 순회] → [commit(DOM 업데이트)]

• 렌더링은 단일 스레드에서 한 번에 실행됨.
• 렌더링 중에는 사용자 입력(click, scroll)이 막혀버림.
• 페이지가 크거나 계산이 많으면, UI가 ‘멈춘 듯’ 느려지는 현상 발생.
• 즉, “블로킹(blocking) 렌더링” 구조 였다.