컨트롤러로 후크 양식 반응

안녕하세요!👋

오늘 여기 이 게시물에서 우리는 react-hook-form('rhf'라고 부릅시다) 라이브러리에서 제어된 구성 요소를 사용하여 양식을 작성하는 방법을 볼 것입니다.

rhf를 사용하면 양식 상태를 관리하고, 유효성 검사 및 오류를 처리하고, 제어된 구성 요소를 사용하고 양식 값을 처리하기 위한 useState() 후크 없이 양식에 반응하는 양식에 더 많은 기능을 사용할 수 있습니다. CRA 설정 프로젝트에 rhf를 설치하고 어떻게 작동하는지 살펴보겠습니다.

yarn add react-hook-form

또는

npm install react-hook-form

material-ui , react-select 라이브러리를 rhf 형식과 통합할 예정이므로 이러한 종속성을 설치하고 시작하겠습니다💫

yarn add react-select @mui/material @emotion/react @emotion/styled @material-ui/core

오류, 종속 입력 필드, 개별 필드 재설정, 전체 양식 재설정 및 마지막으로 양식 제출을 처리합니다.

이제 모든 종속 항목을 설치했으므로 rhf로 양식을 구현하는 방법을 살펴보겠습니다😎. 우선 rhf에서 useForm 및 Controller를 가져옵니다.
useForm()는 맞춤형 후크로,
↪️ defaultValues, mode 등을 인수로 사용하고
↩️는 양식을 관리하는 객체 및 함수로 formState, handleSubmit, watch, setFocus, clearErrors 등을 반환합니다.

import { useForm, Controller } from "react-hook-form";

const defaultValues = {
  name: "",
  email: "[email protected]",
  address: "",
  country: { value: "", label: "" },
  state: { value: "", label: "" }
};

export default function App() {
  const { handleSubmit, reset, control, watch, resetField } = useForm({
    defaultValues
  });
  return(<form></form>);
}

Controller는 여러 가지 소품을 사용하는 래퍼 구성 요소입니다.

👉 name , 고유 및 필수
👉 render , 모든 React 구성 요소를 사용합니다.
👉 rules , 필드 유효성 검사에 도움
👉 control , 구성 요소를 rhf에 등록

  <Controller
    name="name"
    control={control}
    rules={{ required: true }}
    render={({ field: { onChange, value }, fieldState: { error 
              } }) => {
              return (
               <>
                 <TextField
                  placeholderText="Your name goes here!"
                  type="text"
                  name="name"
                  value={value}
                  label="Name"
                  variant="outlined"
                  onChange={onChange}
                  error={error}
                  helperText={error ? "Name is required" : ""}
                 />
               </>
              );
         }}
 />

render 소품은 이벤트와 값을 구성 요소에 연결합니다. 자식 구성 요소에 onChange, onBlur, 이름, 참조 및 값을 제공하고 입력 필드 요소를 처리하기 위한 특정 입력 상태를 포함하는 fieldState 개체도 제공합니다.

동일한 양식에 대해 react-select를 추가하여 계속합니다.

      <Controller
        name="country"
        control={control}
        rules={{
          required: true,
          validate: {
            isCountry: (v) => {
              return v.value !== "" || "Please select country";
            }
          }
        }}
        render={({ field: { onChange, value }, fieldState: { error } }) => {
          return (
            <>
              <Typography variant="body1">Country</Typography>
              <Select
                name="country"
                isClearable
                styles={
                  error && {
                    control: (provided, state) => ({
                      ...provided,
                      borderColor: "#fb6340",
                      borderRadius: "0.25rem"
                    }),
                    valueContainer: (provided, state) => ({
                      ...provided,
                      padding: "8px 8px"
                    })
                  }
                }
                onChange={(selectedOption) => {
                  resetField("state", {
                    defaultValue: { label: "", value: "" }
                  });
                  onChange(selectedOption);
                }}
                value={{ label: value?.label, value: value?.value }}
                options={countries}
              />
              {error?.message.length ? (
                <Typography variant="body2" color="#fb6340">
                  {error.message}
                </Typography>
              ) : null}
            </>
          );
        }}
      />
      <Controller
        name="state"
        control={control}
        rules={{
          required: true,
          validate: {
            isState: (v) => {
              return v.value !== "" || "Please select state";
            }
          }
        }}
        render={({ field, fieldState: { error } }) => {
          const countryDetails = watch("country");
          return (
            <>
              <Typography variant="body1">State</Typography>
              <Select
                name="state"
                isSearchable
                options={
                  countryDetails?.value.length
                    ? states[countryDetails.value]
                    : []
                }
                placeholder="Select state here"
                {...field}
                styles={
                  error && {
                    control: (provided, state) => ({
                      ...provided,
                      borderColor: "#fb6340",
                      borderRadius: "0.25rem"
                    }),
                    valueContainer: (provided, state) => ({
                      ...provided,
                      padding: "8px 8px"
                    })
                  }
                }
              />
              {error?.message.length ? (
                <Typography variant="body2" color="#fb6340">
                  {error.message}
                </Typography>
              ) : null}
            </>
          );
        }}
      />

여기서 resetField(개별 필드 재설정) 및 watch(이름을 전달하여 입력 값 확인) API를 사용하여 종속 입력 필드를 관리할 수 있습니다.

위의 코드에서 볼 수 있듯이 국가 필드를 변경할 때마다 상태 필드 입력 값을 기본값으로 재설정합니다. watch를 사용하여 국가 필드를 추적하고 그에 따라 상태 필드에 대한 옵션을 업데이트할 수 있습니다.

양식 검증

유효성 검사를 추가하기 위해 필수, 최소, 최대, minLength, maxLength, 패턴, 유효성 검사를 제공하는 rules 소품을 사용하고 있습니다. 실패한 유효성 검사는 error 객체에서 fieldState로 처리할 수 있습니다.

양식 제출 및 재설정

이제 이러한 컨트롤러 구성 요소를 form 요소로 래핑하여 handleSubmit를 사용하여 양식 onSubmit 이벤트를 관리하고 reset 함수를 사용하여 양식을 기본값으로 재설정합니다.

  const { handleSubmit, reset, control, watch, resetField } = useForm({
    defaultValues
  });

  const onResetFormData = () => {
    reset(defaultValues);
  };

<form onSubmit={handleSubmit((data) => console.log(data))}>

따라서 제출 버튼을 클릭하면 입력한 양식 데이터가 콘솔에 표시됩니다.

여기codesandbox에서 전체 구현을 확인할 수 있습니다.

왜 우리는 rhf👩‍💻를 선택합니까?

몇가지 눈에 띄는 포인트,
🍬 UI 라이브러리 통합
🍭 격리된 재렌더링으로 렌더링 최적화
🥠 간편한 양식 유효성 검사
🍯 TypeScript 지원
🍪 후크 API, 제어되지 않는 구성 요소 수용
🍫 최소 번들 크기

이것은 react-hook-form으로 양식을 구현하는 한 가지 방법이었습니다. 이것에 대한 당신의 생각을 알려주세요😇.