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

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

Props

이름	타입	설명
`name`	`string`	등록된 필드 이름.
formState	`object`	이는 선택적 프로퍼티로, `useForm`, `useFormContext` 또는 `useFormState`에서 `formState`를 읽거나 구독하지 않은 경우에만 필요합니다. 자세한 규칙은 더 많은 정보를 참고하세요.

Return

이름	타입	설명
`isDirty`	`boolean`	필드가 수정되었는지 여부. 조건: `dirtyFields`를 구독해야 함.
isTouched	`boolean`	필드가 포커스와 블러 이벤트를 받았는지 여부. 조건: `touchedFields`를 구독해야 함.
invalid	`boolean`	필드가 유효하지 않은지 여부. 조건: `errors`를 구독해야 함.
error	`undefined \| FieldError`	필드 오류 객체. 조건: `errors`를 구독해야 함.

규칙

이름은 등록된 필드 이름과 일치해야 함.

getFieldState("test")
getFieldState("test") // ✅ 입력을 등록하고 필드 상태를 반환
getFieldState("non-existent-name") // ❌ 상태를 false로 반환하고 오류를 undefined로 반환

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

useForm, useFormContext 또는 useFormState에서 구독할 수 있음. 이렇게 하면 폼 상태 구독이 설정되고 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가 구독됨

예제

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이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.

getFieldState

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

Props

Return

여러분의 지원에 감사드립니다

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