리액트의 state batch 처리는 어떤 기준으로 일어날까?

• 리액트는 현재 실행중인 작업이 완료 될 때 까지 기다린다.
  • 이는 일반적으로 자바스크립트 실행 컨텍스트가 완료 될 때 까지
• 즉, 하나의 tick 또는 이벤트 루프 사이클 내에서 발생하는 업데이트들이 배치처리된다.

tick 이란?

• 하나의 tick 은 이벤트 루프가 한번 순회하는 것을 의미한다.
• 각 tick 에서 자바스크립트 엔진은 큐에 있는 다음 작업을 실행한다.

즉, 현재 실행중인 자바스크립트 코드가 완료될 때 까지 기다린다.

function handleClick() {
  setCount(c => c + 1);  // 업데이트 1
  setFlag(f => !f);      // 업데이트 2
  console.log("Done");
}

• React 는 setCount 와 setFlag 호출을 기록하지만, 즉시 적용하지 않는다.
• 함수 실행이 완료되면 (하나의 tick 이 끝나면) React 는 기록된 업데이트들을 하나의 배치로 처리한다.