📒

Formik

수업

React 완벽 가이드

주제

5 more properties

참고

Formik

useField API

1. 목차

Formik

NOTE

useFiled()는 입력값을 Formik에 자동으로 연결하는데 도움이 되는 Custom Hook입니다.

일반적으로 useFiled()를 사용하는 방법은 2가지 입니다.

interface Values {
  firstName: string;
  lastName: string;
  email: string;
}
TypeScript
복사
initValue Type

const MyTextField = ({ label, ...props }) => {

	// useField 사용
  const [field, meta, helpers] = useField(props);
  return (
    <>
      <label>
        {label}
        <input {...field} {...props} />
      </label>
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};
TypeScript
복사
Input

const Example = () => (
  <div>
    <h1>My Form</h1>
    
    {/*Formik Context 생성*/}
    <Formik
      initialValues={{
        email: '',
        firstName: 'red',
        lastName: '',
      }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
    >
      {/*Formik*Props*/}    
      {(props: FormikProps<Values>) => (
        <Form>
          <MyTextField name="firstName" type="text" label="First Name" />
          <MyTextField name="lastName" type="text" label="Last Name" />
          <MyTextField name="email" type="email" label="Email" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);
TypeScript
복사
Formik Context

useField API

NOTE

useFiled()는 FiledProps, FiledMetaProps, FiledHandlerProps로 구성된 튜플 배열을 반환하는 커스텀 React Hook입니다.

useField<Value = any>(name: string | FieldHookConfig<Value>): 
	FieldProps | FieldMetaProps | FieldHelperProps
TypeScript
복사

•

매개변수

◦

name: 필드 이름을 나타내는 문자열 또는 객체입니다. 객체는 최소한 name 키를 가지고 있어야 합니다.

•

반환 값

◦

FieldInputProps<Value>

◦

FiledMetaProps<Value>

◦

FiledHelperProps

1. 목차

NOTE

•