useState가 만드는 렌더 갱신 단위

초기 상태

컴포넌트가 처음 실행될 때 useState의 초기값이 상태로 저장된다.

사용자 입력이나 클릭에서 setter를 호출한다.

이전 값 기반 변경은 함수형 업데이트로 stale 값을 피한다.

React가 컴포넌트를 다시 실행하고 새 state로 JSX를 계산한다.

boolean

열림·선택 상태 modal open, checked, expanded 같은 UI 상태

이름을 isOpen처럼 명확히

string

입력값 검색어, 폼 필드, 탭 id

빈 문자열과 undefined 구분

object

묶인 상태 여러 필드가 같은 변경 이유를 가질 때

얕은 병합 자동 없음

derived

계산 값 state에서 계산 가능한 값은 저장보다 계산

중복 원본 방지

직접 대입 state 변수에 직접 값을 넣지 않고 setter를 사용한다.

이전 값 이전 state로 다음 값을 만들면 함수형 업데이트를 쓴다.

객체 갱신 중첩 값을 바꿀 때 새 객체를 만들어 참조를 바꾼다.

저장 필요 계산 가능한 값까지 state로 복제하지 않는다.

setCount((prev) => prev + 1);
setUser((prev) => ({ ...prev, name }));