</> `getFieldState:` `(name: string, formState?: Object) => ({isDirty, isTouched, invalid, error})`

이 메서드는 react-hook-form v7.25.0에서 개별 필드 상태를 반환하기 위해 도입되었습니다. 이는 타입 안전한 방식으로 중첩된 필드 상태를 가져오려는 경우에 유용합니다.

Props

Name	Type	Description
`name`	`string`	등록된 필드 이름.
formState	`object`	선택적 prop으로, useForm, useFormContext, 또는 useFormState에서 formState를 읽거나 구독하지 않는 경우에만 필요합니다. 자세한 내용은 rules를 참조하세요.

Return

Name	Type	Description
`isDirty`	`boolean`	필드가 수정되었는지 여부. 조건: `dirtyFields`를 구독해야 합니다.
isTouched	`boolean`	필드가 포커스와 블러 이벤트를 받았는지 여부. 조건: `touchedFields`를 구독해야 합니다.
invalid	`boolean`	필드가 유효하지 않은지 여부. 조건: `errors`를 구독해야 합니다.
error	`undefined \| FieldError`	필드 에러 객체. 조건: `errors`를 구독해야 합니다.

RULES

name은 등록된 필드 이름과 일치해야 합니다.

getFieldState("test")
getFieldState("test") // ✅ 입력을 등록하고 필드 상태를 반환합니다
getFieldState("non-existent-name") // ❌ 상태를 false로, 에러를 undefined로 반환합니다

getFieldState는 폼 상태 업데이트를 구독하여 동작하며, 다음과 같은 방법으로 formState를 구독할 수 있습니다:

useForm, useFormContext 또는 useFormState에서 구독할 수 있습니다. 이는 formState 구독을 설정하고 getFieldState의 두 번째 인수가 더 이상 필요하지 않습니다.

const {
  register,
  formState: { isDirty },
} = useForm()
register("test")
getFieldState("test") // ✅

const { isDirty } = useFormState()
register("test")
getFieldState("test") // ✅

const {
  register,
  formState: { isDirty },
} = useFormContext()
register("test")
getFieldState("test") // ✅

폼 상태 구독이 설정되어 있지 않은 경우, 다음 예제와 같이 전체 formState를 두 번째 선택적 인수로 전달할 수 있습니다:

const { register } = useForm()
register("test")
const { isDirty } = getFieldState("test") // ❌ useForm에서 formState의 isDirty가 구독되지 않음
const { register, formState } = useForm()
const { isDirty } = getFieldState("test", formState) // ✅ formState.isDirty가 구독됨
const { formState } = useFormContext()
const { touchedFields } = getFieldState("test", formState) // ✅ formState.touchedFields가 구독됨

Examples

CodeSandbox ^JS

import * as React from "react"

import { useForm } from "react-hook-form"

export default function App() {
  const {
    register,
    getFieldState,
    formState: { isDirty, isValid },
  } = useForm({
    mode: "onChange",

    defaultValues: {
      firstName: "",
    },
  })

  // 렌더링 전이나 렌더링 함수 내에서 호출할 수 있습니다.

  const fieldState = getFieldState("firstName")

  return (
    <form>
      <input {...register("firstName", { required: true })} />{" "}
      <p>{getFieldState("firstName").isDirty && "dirty"}</p>{" "}
      <p>{getFieldState("firstName").isTouched && "touched"}</p>
      <button
        type="button"
        onClick={() => console.log(getFieldState("firstName"))}
      >
        field state
      </button>
    </form>
  )
}

지원해 주셔서 감사합니다

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

getFieldState

</> getFieldState: (name: string, formState?: Object) => ({isDirty, isTouched, invalid, error})

Props

Return

지원해 주셔서 감사합니다

</> `getFieldState:` `(name: string, formState?: Object) => ({isDirty, isTouched, invalid, error})`