useControlledState

useControlledState(controlled, defaultValue)는 값 prop과 기본값을 받는 컴포넌트에 [value, setValue]를 반환합니다. controlled가 undefined가 아닌 동안에는 그 값이 곧 값이고 setValue는 아무것도 하지 않으므로, 부모가 결정합니다. 그렇지 않으면 훅이 defaultValue에서 시작하는 자체 상태를 가지며, setValue가 다음 값을 저장합니다.

function Mute({ pressed, defaultPressed = false, onPressedChange }: MuteProps) {
	const [on, setOn] = useControlledState(pressed, defaultPressed)
	return (
		<button aria-pressed={on} onClick={() => { setOn(!on); onPressedChange?.(!on) }}>
			Mute
		</button>
	)
}

undefined는 비제어를 뜻하므로, 제어 상태의 빈 값은 null입니다. setValue는 업데이터 함수가 아닌 값을 받고, 변경 콜백을 호출하지 않습니다. 위처럼 직접 호출하거나 useControlledValue를 쓰세요. 컴포넌트가 사는 동안 한 가지 모드를 유지하세요. 제어에서 비제어로 바뀌면 마지막 제어 값이 아니라 훅 자체의 상태가 보입니다.

언제 쓰나요

언제: 값 prop과 기본값을 받고 변경 콜백은 직접 호출하는 자체 컴포넌트.

쓰지 않을 때: 바뀌지 않은 값을 건너뛰고 변경 콜백을 호출하는 setter 하나 → useControlledValue. 부모가 정할 수 없는 상태 → useState.

Props