Interactive Demo
Concurrent Rendering
React 18이 렌더링을 어떻게 다르게 처리하는지
직접 입력하면서 차이를 확인해보세요.
실험 방법
1
각 모드에서 검색창에 글자를 입력하세요
2
초록 공이 멈추는지 확인하세요 — 멈추면 UI가 차단된 것입니다
3
두 모드의 입력창 반응 속도를 비교해보세요
200 items × 4ms artificial delay ≈ ~800ms blocking (과장된 환경)
동기 렌더링
입력 즉시 200개를 한 번에 동기적으로 렌더링합니다.
그동안 브라우저는 다른 작업을 전혀 할 수 없습니다.
지금 일어나는 일
onChange
200개 동기 렌더링 즉시 시작
처리 방식
4ms × 200개 = ~800ms 차단
브라우저
입력·스크롤·애니메이션 모두 정지
200 / 200 items
동시성 렌더링
입력(긴급)과 목록 렌더링(비긴급)을 분리합니다.
청크 단위로 브라우저에 제어권을 양보해 입력이 항상 즉각 반응합니다.
지금 일어나는 일
onChange
input 즉시 업데이트 (긴급)
목록 렌더
5개씩 청크 처리 후 브라우저에 yield
새 입력
진행 중인 렌더링 취소 후 재시작
200 / 200 items
렌더링 중...