상태 변경 렌더 계산
이벤트가 setState를 호출하면 React는 컴포넌트 함수를 다시 실행하고, 계산된 JSX 결과를 기준으로 화면 차이를 반영합니다.
카운터 예제로 보는 갱신 흐름
one render pass
event
버튼 클릭
사용자 행동이 변경의 시작점이 됩니다.
setState
업데이트 예약
새 값을 전달하고 직접 변수는 바꾸지 않습니다.
render
함수 재실행
현재 state로 JSX를 다시 계산합니다.
commit
DOM 반영
바뀐 부분만 실제 화면에 적용합니다.
const [count, setCount] = useState(0)
onClick={() => setCount(count + 1)}
<strong>카운터: {count}</strong>