[React] useForm 사용 - 시작 단계

0. useForm 사용 - 시작

대략적인 책임 구조

1. register() :: 비제어 입력 사용 시
2. control     :: 제어 입력 사용 시(UI 라이브러리의 커스텀 input사용 시) 

0.1 register()를 사용하는 경우

:: 입력이 비제어 입력을 사용한다면 useForm의 register()를 사용

:: 해당 비제어 컴포넌트의 Reference를 register에 등록하여 사용(ref에 연결됨을 의미)

// 비구조화 사용
function Input({ control, name }) {
  const { field } = useController({ name, control });
  const { value, ref, onChange, onBlur, name = fieldname } = field;

  return (
    <TextField 
      onChange={onChange}
      onBlur={onBlur}
      value={value}
      name={fieldname}
      inputRef={ref}
    />
  );
}

 

// 일반적 사용
export function App() {
  const { register, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(JSON.stringify(data)))}>
      <input {...register("username")} /> // 해당 입력의 Key == username
      <input type="submit" value="Submit Button" />
    </form>
  );
}

 

---

 

0.2 Control을 사용하는 경우

:: 입력이 제어 입력을 사용한다면 useForm의 control에 등록
:: useForm의 field 반환 값을 통해 React.useRef로 만들어 등록

:: 제어 입력을 사용하는 UI 라이브러리는 각각의 Props가 존재하므로,

:: 중간에 hook or Component를 통해 등록을 해야 함

1. useController :: hook 방식
2. <Controller /> :: Component 방식

---

1. useController로 등록

// 비구조화 할당
const { field } = useController({ name, control });
const { value, ref, onChange, onBlur, name = fieldname } = field;

return (
	<TextField 
      onChange={onChange}
      onBlur={onBlur}
      value={value}
      name={fieldname}
      inputRef={ref}
    />
);

---

// 일반적인 사용 (field를 비구조화 X)
// control 은 최상위 useForm 에서 생성한것

// 경우 1
function Input({ control, name }) {
  const { field } = useController({ name, control });
  return (
    <TextField 
      onChange={field.onChange}
      onBlur={field.onBlur}
      value={field.value}
      name={field.name}
      inputRef={field.ref}
    />
  );
}

// 경우 2
function Input({ control, name }) {
  const { field } = useController({ name, control });
  return (
    <TextField {...field} />
  );
}

---

// 여러개의 useController 사용 시, field를 리네이밍하여 여러개 사용 가능
const { field: input    } = useController({ name: 'input'    })
const { field: checkbox } = useController({ name: 'checkbox' })

<input {...input}    />
<input {...checkbox} />

---

2. <Controller />를 사용하는 경우

<Controller
	control={control}
    name={name}
    render={({ field: { value, ref, onChange, onBlur, name } }) => (
    	<ReactDatePicker // UI 라이브러리의 input
        	onChange={onChange}
            onBlur={onBlur}
            selected={value}
         />
   )}
/>

// 일반적인 전달 방법
function App() {
  const { handleSubmit, control } = useForm()

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        control={control}
        name="date"
        render={({ field }) => ( // { field: { value, ref, onChange, onBlur, name }
          <ReactDatePicker {...field} />
        )}
      />
      <input type="submit" value="Submit Button" />
    </form>
  )
}

 

---

참고

ASAC 수업자료