state 업데이트 큐

1️⃣ State 설정 시 다음 렌더링이 큐에 추가됨

2️⃣ 렌더링 전 여러 작업 수행 가능

3️⃣ React의 state 배치 방식 이해 필요

React state batches 업데이트

setNumber(number + 1)를 세 번 호출하므로 “+3” 버튼을 클릭하면 세 번 증가할 것으로 예상할 수 있습니다.

이전 세션에서 기억할 수 있듯이 각 렌더링의 state 값은 고정되어 있으므로, 첫 번째 렌더링의 이벤트 핸들러의 number 값은 setNumber(1)을 몇 번 호출하든 항상 0입니다.

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);

1️⃣ React는 이벤트 핸들러 실행이 끝날 때까지 기다림

2️⃣ 모든 setState 호출 후 한 번만 리렌더링

3️⃣ 음식 주문과 유사한 동작