본문으로 건너뛰기

useForm

  • form을 조작할 수 있는 다양한 기능을 제공하는 hook입니다.
  • Form 컴포넌트 내부의 뼈대이므로 편의에 따라 다양하게 활용할 수 있습니다.

useForm​

(options?) => UseFormReturn

  • options?: object
    • defaultValues: { [name: string]: string | number | ReadonlyArray<string> | undefined } - field들의 default value입니다.

UseFormReturn​

store​

{ [name:string]: FieldInfo }

field의 정보가 저장됩니다. onChange, onBlur 이벤트가 발생하는 경우 갱신됩니다.

return

  • FieldInfo: object
    • value: string - field의 value입니다.
    • registered: boolean - 현재 field의 등록 여부를 반환합니다.
    • watching: boolean - 현재 field의 구독 여부를 반환합니다.
    • isValid: boolean - 현재 field의 유효 여부를 반환합니다. 모든 유효성 검사를 통과하면 true가 됩니다.
    • validations: { type?:string, message?:string, validator?: (value:string)=>boolean }[] - 현재 field에 등록된 유효성 검사 배열입니다.
    • ref: HTMLInputElement | HTMLSelectElement | null - 등록된 field의 ref입니다.

errors​

{ [name:string]: ErrorsInfo }

return

  • FieldInfo: object
    • type?: string - 에러의 type입니다.
    • message?: string - 에러의 message입니다.

register​

(name: string, options?) => ({ onChange, onBlur, name, ref })

props

  • name: string - field의 이름입니다.

  • options?: object

    • value: string | number | ReadonlyArray<string> | undefined - field의 value입니다.

    • onChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void - field의 change event를 구독합니다.

    • onBlur: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void - field의 blur event를 구독합니다.

    • validations: { type?:string, message?:string, validator?: (value:string)=>boolean }[] - field의 유효성 검사 배열입니다. onChange, onBlur 이벤트가 발생하는 경우 유효성 검사가 순차적으로 이루어집니다.

return

  • value: string | number | ReadonlyArray<string> | undefined - field의 value입니다.
  • onChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void - field의 change event를 구독합니다.
  • onBlur: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void - field의 blur event를 구독합니다.
  • ref: RefCallback<HTMLInputElement | HTMLSelectElement> - 내부적인 조작을 위한 field의 ref입니다.

watch​

(fieldsNames: string[]) => ({ [name:string]: string })

특정 필드를 구독합니다. 해당 필드는 Controlled Field로 동작합니다.

props

  • fieldNames: string[] - 구독할 field들의 이름입니다.

return

  • { [name:string]: string } - 구독한 field들의 value가 반환됩니다.

setError​

(name: string, info?) => void

field의 에러를 설정합니다.

props

  • name: string - 에러를 설정할 field의 이름입니다.

  • info?: object
    • type?: string - 설정할 에러의 type입니다.
    • message?: string - 설정할 에러의 message입니다.

handleSubmit​

(onValid?: OnValid, onInvalid?: OnInvalid) => ChangeEventHandler<HTMLFormElement>

유효성 검사 여부에 따라 실행될 두 개의 콜백 함수를 인자로 받는 함수입니다.

props

  • onValid?: (value: SubmitValue, e: FormEvent<HTMLFormElement>) => void - 모든 field가 유효성 검사를 통과하는 경우 실행됩니다.

  • onValid?: (value: FormErrors, e: FormEvent<HTMLFormElement>) => void - 최소 한 개의 field가 유효성 검사를 통과하지 못하는 경우 실행됩니다.

getFieldValue​

(name: string) => string

field의 value를 반환합니다.

props

  • name: string - value를 반환할 field의 이름입니다.

getFieldState​

(name: string) => { isValid: boolean, ref: HTMLInputElement | HTMLSelectElement | null } | undefined

field의 state를 반환합니다.

  • isValid: boolean - field의 유효 여부입니다.
  • ref: HTMLInputElement | HTMLSelectElement | null - 등록된 field의 ref입니다.