[React] react-hook-form (2)

1. Controller

material ui처럼 반드시 controlled component 형태로 사용하는 라이브러리들이 있는데,
이런 컴포넌트들은 등록할 때 register 대신 control이라는 객체를 사용한다

const {
    register,
    control,
    formState: { errors },
  } = useFormContext<ContentData>();

또한 Controller라는 wrapper 컴포넌트로 래핑해서 react hook form과 사용해야한다

<Controller
  name="gender"
  control={control}
  rules={{ required: "please choice gender" }}
  render={({ field: { onChange } }) => {
    return (
     <RadioInput
       dataList={[
          { id: 0, gender: "남성" },
          { id: 1, gender: "여성" },
        ]}
        handleCheck={onChange}
      />
    );
  }}
/>

{errors.gender && <p>{errors.gender.message}</p>}

{/** RadioInput **/}
function RadioInput({ dataList, handleCheck }: Props) {
  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => handleCheck(e.currentTarget.value);

  return (
    <>
      {dataList.map(({ id, gender }) => (
        <Fragment key={id}>
          <input type="radio" value={gender} name="gender" onChange={handleChange} />
          {gender}
        </Fragment>
      ))}
    </>
  );
}

render를 사용해서 field 값을 복사하거나 꺼내쓰면 된다
field에는 value, onBlur, onChange 등등 이 있다
render안의 onChange를 조작해 onChange안에 들어갈 값을 선택할 수 있다

2. useForm vs. useFormContext

• useForm
  • input 또는 select 값들을 관리할 수 있다
  • defaultValues나 defaultChecked를 통해 초기값을 설정할 수 있다
  • formState를 이용하여 값이 오염되지는 않았는지, 폼이 정상적으로 송신되었는지 폼의 상태를 즉각적으로 알 수 있다
  • 음.. 약간 form 관리 목적으로 사용하는 듯 싶다

• useFormContext
  • 컨텍스트를 prop처럼 통과시키는 것이 불편해지는, 깊이 중첩된 구조에서 사용하는 것을 목적으로 하는 커스텀 훅이다
  • FormProvider로 관리할 컴포넌트를 감싸줘야한다
  • 하나의 폼의 데이터를 여러 컴포넌트에서 공유하려는 목적으로 사용하는 것 같다

ref

• https://wonillism.tistory.com/279
• https://cheri.tistory.com/262
• https://zlrlo.github.io/react-hook-form/