상태 렌더링 루프

상태 변경 렌더 계산

이벤트가 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>