useState
state는 setter를 통해 다음 렌더를 예약한다
props가 외부에서 받은 읽기 전용 값이라면 state는 컴포넌트가
관리하고 setter 호출로 UI 갱신을 요청하는 값이다.
| 구간 | 역할 | 잘못된 신호 | 올바른 기준 |
|---|---|---|---|
| Initial첫 값 | useState의 인자로 첫 렌더에서 사용할 값을 정한다. | 초기값 계산이 매 렌더마다 반복되어 느려진다. | 필요하면 초기화 함수를 사용해 첫 렌더에만 계산한다. |
| Read현재 값 | 렌더링 중 state 값을 읽어 화면 내용을 만든다. | state를 직접 대입해도 화면이 즉시 맞춰지길 기대한다. | 렌더 함수 안에서는 현재 스냅샷으로만 읽는다. |
| Setter변경 요청 | setCount 같은 setter가 React에 다음 값을 알려준다. | 연속 업데이트에서 오래된 count 값을 기준으로 계산한다. | 이전 값 기반 변경은 setCount(prev => prev + 1)을 쓴다. |
| Render화면 반영 | 새 state로 컴포넌트 함수가 다시 실행되고 UI가 갱신된다. | setter 직후 같은 줄에서 화면이 바뀌었다고 가정한다. | 결과 확인은 다음 렌더 이후 화면과 값으로 판단한다. |
| Instance독립 상태 | 같은 컴포넌트라도 렌더된 인스턴스마다 자기 state를 가진다. | 여러 컴포넌트가 같은 state를 자동 공유한다고 생각한다. | 공유가 필요하면 부모 state나 외부 store로 올린다. |