`useForm` 필드 타입별 Controller 사용 패턴 모음

react-hook-form의 Controller를 사용할 때, 컴포넌트 유형별로 field를 어떻게 연결해야 하는지 정리. 기본 MUI 컴포넌트부터 사용자 정의 컴포넌트까지 적용 가능

---

컴포넌트별 패턴 정리

컴포넌트 타입	사용 방식	설명
TextField (text input)	{...field}	value, onChange(e), ref 등 모두 호환되므로 그대로 spread 가능
Select (기본 select 또는 MUI Select)	{...field}	value와 onChange 이벤트가 호환되므로 spread 가능
Switch / Checkbox	checked={field.value}, onChange={e => field.onChange(e.target.checked)}	boolean 값을 다루므로 value가 아닌 checked로 연결해야 함
Radio Group	value={field.value}, onChange={field.onChange}	선택된 라디오 값이 문자열이면 직접 바인딩
Slider	value={field.value}, onChange={(_, val) => field.onChange(val)}	MUI Slider처럼 onChange 인자가 (event, value) 형식인 경우 분리 처리
Autocomplete	value={field.value}, onChange={(_, val) => field.onChange(val)}	MUI Autocomplete는 두 번째 인자가 선택된 값이므로 해당 값만 전달
CustomComponent (props 이름이 다를 때)	value={field.value}, onChange={field.onChange}	컴포넌트의 prop 이름이 value/onChange가 아니면 이름을 맞춰주거나 내부에서 매핑 처리 필요

---

팁

• boolean 값을 다루는 컴포넌트는 checked, 나머지는 대부분 value
• Slider, Autocomplete처럼 onChange 시 두 번째 인자가 실제 값인 경우는 (e, val) 구조를 처리
• 사용자 정의 컴포넌트는 forwardRef와 value, onChange 구조를 맞춰주는 것이 핵심