Formik을 사용하여 React에서 양식을 작성하는 간단한 구조

소개

반응 코드에서 양식을 작성하기 위해 Formik을 사용하는 방법을 공유하고 싶었습니다. 나는 당신이 이미 듣고 시도Formik했기 때문에 여기에서 대부분의 구성 요소 구조에 대해 논의할 수 있을 것으로 예상합니다.

이 문서는 전체Formik 자습서가 아닙니다. Formik docs에는 필요한 모든 정보가 있습니다.

useFormik 후크

Formik를 사용하여 양식을 생성할 수 있는 여러 가지 방법 중에서 useFormik 후크는 내가 필요로 했던 유일한 것입니다. 이것은 config 객체를 받아서 양식을 만드는 데 필요한 모든 도구가 포함된 객체를 반환합니다.
config 개체에 추가해야 하는 최소값은 다음과 같습니다.

initialValues 객체 - 양식이 렌더링될 때 양식 필드 내부로 들어가는 값입니다. 이것은 양식의 초기 상태입니다.

onSubmit 기능 - 사용자가 양식을 제출하면 최종 값을 받습니다. 서버로 보내기 전에 필요한 경우 이 기능을 사용하여 values를 정리하십시오.

validate 함수 - 값에 대한 유효성 검사를 실행하고 오류를 반환합니다. Yup 개체 스키마 유효성 검사 라이브러리를 사용하여 스키마를 정의하는 데 사용할 수 있는 대안validationSchema이 있습니다.

const formik = useFormik({
  initialValues,
  onSubmit,
  validate,
});

const {
  values,
  errors,
  handleSubmit,
  setFieldValue,
  ...andManyOthers
} = formik;

구성요소 구조

저는 항상 양식에 좋은 오래된 2단계container & presentational 구조를 사용합니다.

config 후크에 들어가는 모든 useFormik(config)를 정의하는 컨테이너 구성 요소입니다.

이config prop을 수신하고 양식 구성 요소를 렌더링하는 프리젠테이션 구성 요소입니다.

이 구조는 재사용 가능한 구성 요소를 작성하는 일반적인 스타일입니다. 이것은 create 및 edit 항목에 대해 별도의 컨테이너를 생성하여 양식에 더 잘 작동하지만 양식을 표시하는 동일한 <Form /> 구성 요소를 사용합니다.

예를 들어 사용자 계정 양식 구조는 다음과 같습니다.

<CreateUserFormContainer />

<UpdateUserFormContainer />

<UserForm />

validate 함수 또는 validationSchema는 다른 파일로 이동하여 양식 컨테이너로 가져옵니다.
create 와 edit 가 모두 필요하지 않더라도 양식 컨테이너를 작성하면 큰 양식에서 내용을 명확하게 유지할 수 있습니다.

두 형식을 모두 사용하는 경우 isNew 형식인지 <UserForm /> 형식인지 확인하기 위해 추가 create prop을 edit에 보냅니다. 이렇게 하면 올바른 오류 메시지 및 기타 텍스트를 표시하는 데 도움이 됩니다.

사용자 계정 양식

다음은 일부 유틸리티 및 유효성 검사와 함께 샘플 사용자 계정 양식에 대한 코드를 볼 수 있는 CodeSandbox Link입니다.

마지막 생각들

useFormik 후크만 필요했지만 <Field> , <ErrorMessage> , useFormik 와 같은 Formik 요소를 사용하여 사용자 정의 필드를 생성하려는 경우 작동하지 않습니다. 따라서 useFormik 후크를 사용하여 무엇을 놓치고 있는지 확인하려면 useFormik docs을 확인하십시오.
<Form /> 및 create 모두에 대해 동일한 edit를 사용하기 위해 JSX에서 너무 많은 조건문을 작성하거나 create 및 edit 양식의 양식 필드에 많은 차이가 있는 경우 분리해야 할 때입니다. 다른 구성 요소에 있습니다.

특히 Redux 또는 MobX와 같은 상태 관리 라이브러리를 사용하여 양식 데이터를 전역 상태로 저장할 필요가 없습니다.