React - learn - Queueing a Series of State Updates (상태 업데이트 대기열에 추가하기)

https://react.dev/learn/queueing-a-series-of-state-updates

 

1. 요청 카운터 수정하기

- 카운터를 늘리거나 줄이는 클릭중에 결정된 구체적인 값("pending") 으로 설정하면 업데이트를 할수있다!

  async function handleClick() {
    setPending((p) => p + 1);
    await delay(3000);
    setPending((p) => p - 1);
    setCompleted((c) => c + 1);
  }

- 클릭했을때 pending 상태값에 +1 (현재 pending 상태값에 이전값인 p를 이용해서 업데이트)

- delay함수로 3초를 기다림

- 3초가 경과하면 setPending로 pending 상태값에서 -1

- setCompleted로 compleated 상태값에 +1

 

 

 

2. 상태 대기열 

.. 풀어서 남겨두기로...!

 

 

---

※ 이벤트 핸들러 실행이 완료된 후 상태 업데이트를 처리한다고한다! (batching)

※ 하나의 이벤트에서 일부 상태를 여러번 업데이트하려면 setNumber( n => n + 1 ) 처럼 사용하기