useState
state는 사용자 상호작용에 따라 UI를 다시 그리게 하는 내부 데이터다
props가 외부에서 받은 읽기 전용 값이라면,
state는 컴포넌트가 스스로 관리하는 변화 가능한 값이다.
setter를 호출하면 React가 변경을 감지하고 다시 렌더링한다.
state
setter
render
초기값
useState(0)으로 첫 값을 정한다
읽기
count는 렌더링에 사용되는 현재 값이다
변경
setCount를 호출해야 UI 갱신이 예약된다
setter 호출은 값 변경과 재렌더링을 연결한다
DOM을 직접 고치는 대신 상태를 바꾸면 화면은 상태의 결과로 다시 그려진다.
Event
사용자가 버튼 클릭
onClick 핸들러가 실행되어 상태 변경 함수를 호출한다.
Setter
setCount(count + 1)
React에게 다음 렌더링에서 사용할 새 값을 알려준다.
Render
새 state로 UI 갱신
컴포넌트 함수가 다시 실행되고 화면은 최신 상태를 반영한다.
state를 다룰 때는 직접 변경하지 않는 규칙이 중요하다
React가 변경을 추적할 수 있는 경로로만 업데이트해야 예측 가능한 UI가 된다.
직접 대입 금지
count = count + 1은 React에 변경 사실을 알리지
못한다.
이전 값 기반 업데이트
연속 업데이트는 setCount(prev => prev + 1) 형태가
안전하다.
컴포넌트별 독립성
같은 컴포넌트를 여러 번 렌더링해도 각 인스턴스는 자기 state를 가진다.