useState 원본 상태와 파생값 분리

상태 목록화

컴포넌트 안의 모든 useState가 왜 필요한지 쓰임새를 표시한다.

다른 state나 props에서 계산 가능한 값은 저장하지 않는다.

같은 사용자 행동에서 함께 바뀌는 값은 객체나 reducer로 관리한다.

폼 reset, 탭 전환, 데이터 변경 때 어떤 상태가 초기화되는지 정한다.

duplicated

중복 state selectedItem과 selectedId+items가 동시에 원본이 되는 문제

id만 저장하고 계산

stale

오래된 값 이전 state 기반 계산을 직접 참조해 놓치는 문제

함수형 업데이트

object

관련 값 묶기 폼 필드와 status처럼 같은 전이에 묶인 값

부분 병합 자동 없음

reset

초기화 새 데이터 로드나 modal 닫힘 시 상태를 재설정

key remount도 선택지

중복 제거 같은 의미의 값이 두 state에 따로 저장되지 않는다.

함수형 갱신 이전 값에 의존하는 변경은 updater 함수를 사용한다.

초기화 화면 전환 후 이전 입력이 의도 없이 남지 않는다.

전이 복잡도 분기가 많아지면 useReducer로 이동할 근거가 있다.