react hook form

  const {
    register,
    handleSubmit,
    setError,
    getValues,
    watch,
    resetField,
    clearErrors,
    getFieldState,
    setValue,
    trigger,
    formState: { errors, isValid,isLoading,isSubmitted,isSubmitting },
  } = useForm<IFormInput>({
    mode: 'onSubmit',
    reValidateMode: 'onChange',
    defaultValues: {},
    resolver: undefined,
    context: undefined,
    criteriaMode: 'firstError',
    shouldFocusError: true,
    shouldUnregister: false,
    delayError: undefined,
  });
  

ARIA의 속성,상태,역할 및 사용 예시/주의사항

출처: youtube aoa웹접근성 채널role="application":동일요소x,div요소와같이 그룹역할을하는 요소로 대체role="banner":비슷한 의미로 <header>사용가능 -> <header role="banner"> 로 사용시 1페이지에서

https://velog.io/@kym123123/ARIA의속성상태역할및사용-예시주의사항#role역할-특정-요소에-역할정의-사용자에게-정보제공-부여한-역할-동적변경-불가

. 🧮 useForm : props

5.1. useForm Props : mode

onChange | onBlur | onSubmit(default) | onTouched | all ='onSubmit'BASH

5.2. useForm Props : reValidateMode

reValidateMode: onChange(default) | onBlur | onSubmit ='onChange'BASH

5.3. useForm Props : defaultValues

defaultValues: Record<string, any> = {}BASH

5.4. useForm Props : resolver

resolver: (values: any, context?: object) => Promise<ResolverResult> | ResolverResultBASH

5.5. useForm Props : context

context: objectBASH

5.6. useForm Props : shouldUnregister

shouldUnregister: boolean =true |false(default)BASH

5.7. useForm Props : criteriaMode

criteriaMode : firstError(default) | allBASH

5.8. useForm Props : shouldFocusError

shouldFocusError: boolean =true(default) |falseBASH

5.9. useForm Props : delayError

delayError : numberBASH

5.10. useForm Props : shouldUseNativeValidation

shouldUseNativeValidation: boolean =false(default) |trueBASH

register

// 예시
const { onChange, onBlur, name, ref } = register('firstName'); 
        
<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>

// 간편식
<input {...register('firstName')} />

9. 😮 components에 register 등록하기

// not working, because ref is not assigned
<TextInput {...register('test')} />

const firstName = register('firstName', { required:true })
<TextInput
  onChange={firstName.onChange}
  onBlur={firstName.onBlur}
  inputRef={firstName.ref} // you can achieve the samefor different ref name such as innerRef
/>

Using React Hook Form with Next.js 13 Server Actions

Here's how to use React Hook Form with Next.js Server Action

https://brockherion.dev/blog/posts/using-react-hook-form-with-nextjs-13-server-actions/