Controller란?
React Hook Form은 제어되지 않는 컴포넌트와 입력을 수용하지만
React-Select, AntD, MUI와 같은 외부 제어 컴포넌트를 작업하는 경우를 피하기가 어려울 것이다. 외부 제어 컴포넌트를 사용할 때
Controller 컴포넌트를 사용하면 UI 라이브러리 및 외부 제어 컴포넌트를 더 쉽게 작업할 수 있도록 도와준다.
Controller의 속성
- name: 요소를 구분하기 위한 값으로 같은 폼으로 묶여 있는 요소끼리 유니크해야 한다.
- control: control 객체는 useForm을 호출한 것으로 폼 프로바이더를 사용할 때 선택 사항이다.
- render: 리액트 요소를 반환하고 컴포넌트에 값과 이벤트를 첨부할 수 있는 기능을 제공하는 함수이다. 자식 컴포넌트에 onChange, onBlur, name, ref, value를 제공하고 특정 입력 상태를 포함하는 fieldState 객체도 제공한다.
- rules: register 옵션에 대해 동일한 형식의 유효성 검사 규칙을 포함한다. (required, min, max, minLength, maxLength, pattern, validate 포함)
- shouldUnregister : 언마운트 이후 입력이 register 해제되고
defaultValues도 제거된다.- disabled : 입력 해제/재장착 및 재정렬 이후 unregister함수가 호출되기 때문에 useFieldArray와 함께 사용할 때 피해야 한다.
제어된 입력이 비활성화되고 해당 값이 제출 데이터에서 생략된다.
