Skip to content
♥

createFormControl

폼 상태를 생성하고 구독할 수 있도록 준비합니다. (BETA)

이 함수는 전체 폼 상태 구독을 생성하고, 리액트 컴포넌트 유무에 상관없이 업데이트를 구독할 수 있게 합니다. React Context API 없이도 이 함수를 사용할 수 있습니다.

Props

NameTypeDescription
...propsObjectUseFormProps

Returns

NameTypeDescription
formControlObjectuseForm 훅을 위한 control 객체
controlObjectuseController, useFormState, useWatch를 위한 control 객체
...returnsFunctionsuseForm이 반환하는 메서드들
NOTES
  • 이 함수는 v7.55.0-next.3 버전부터 제공됩니다. - 이 함수는 완전히 선택적 기능으로, useFormContext API 대신 사용하는 것을 고려해볼 수 있습니다. - 리액트 리렌더링을 건너뛰어 formsState를 구독하고자 할 때 유용하게 사용할 수 있습니다.
RULES
  • 이 API 또는 Context API 중 하나를 사용해야 합니다.
const props = createFormControl()


<FormProvider {...props} /> // ❌ provider가 필요 없습니다.{" "}


<input {...props.register('name')} /> // ✅ createFormControl에서 직접 사용하는 메서드입니다

Examples:

const { formControl, control, handleSubmit, register } = createFormControl({
  mode: 'onChange',
  defaultValues: {
    firstName: 'Bill'
  }
}})


function App() {
  useForm({
    formControl,
  })


  return (
    <form onSubmit={handleSubmit(data => console.log)}>
      <input {...register('name')} />
      <FormState />
      <Controller />
    </form>
  );
}


function FormState() {
  useFormState({
    control // context api가 더이상 필요하지 않음.
  })
}


function Controller() {
  useFormState({
    control // context api가 더이상 필요하지 않음.
  })
}
const { formControl, register } = createFormControl(props)


formControl.subscribe({
  formState: {
    isDirty: true,
    values: true,
  },
  callback: (formState) => {
    if (formState.isDirty) {
      // do something here
    }


    if (formState.values.test.length > 3) {
      // do something here
    }
  },
})


function App() {
  const { register } = useForm({
    formControl,
  })


  return (
    <form>
      <input {...register("test")} />
    </form>
  )
}

지원해 주셔서 감사합니다

프로젝트에서 React Hook Form이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.