React-Hook-Form 사용법(Part3: MUI 밸리데이션) 🌟

소개

Part1에서는 RHF의 사용법. Part2에서는 RHF와 yup을 맞추어 이용하는 방법을 보았습니다. Part3에서는 MUI와의 병용을 살펴 보겠습니다.

패키지 설치

이번 설치할 것은 없습니다.
MUI의 밸리데이션은 지금까지의 방법에 한마디 덧붙일 뿐이므로 간단합니다!

MUI와 RHF 사용법

방법

MUI는 register를 사용하여 등록할 수 없습니다. Controller 컴퍼넌트를 import해 Controller 컴퍼넌트의 props에 MUI 를 건네주는 것으로 밸리데이션이나 value 의 취득을 실시합니다.

Controller 컴포넌트 import

react-hook-form에서 Controller를 가져옵니다.

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

컨트롤러 구성 요소 정의

컨트롤러를 정의합니다. props는 "name", "control", "render"를 정의합니다. 각 props를 설명합니다.

name
name은 register와 비슷한 의미를 갖습니다. name 속성을 등록하여 RHF에서 제어할 수 있습니다. 따라서 name의 props에는 "email"이나 password"와 같은 자유로운 값을 전달할 수 있습니다.

control
control의 Props에 control을 전달합니다. control은 useForm에서 얻을 수 있습니다.

  const {control} = useForm();

render
render는 함수를 지정합니다. 지정된 함수는 필드를 받습니다. field에는 control에 지정된 props의 값이 들어 있습니다. 또한 지정된 함수는 MUI를 반환합니다.
다음 예제에서는 반환 값의 MUI로 TextField를 반환합니다. 또한 TextField의 props에는 필드를 스프레드하여 지정합니다. 이렇게하면 MUI의 value 값을 RHF로 얻을 수 있습니다.

 render={({ field }) => (
          <TextField
            {...field}
          />
        )}

이상의 정의를 정리한 코드가 이하가 됩니다. 이제 RHF에서 MUI의 value 값을 얻을 수 있습니다.

<Controller
        name="email"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
          />
        )}
      />

오류 메시지 출력

그리고는 에러 메세지를 낼 수 있도록(듯이) 합니다. part2의 지식이 있으면 여기를 읽지 않아도 쓸 수 있을 것 같네요.
아래 예제의 코드는 이메일 입력을 수락하는 MUI로 정의합니다.

※텍스트 필드의 오른쪽의 3점 리더와 마루의 녀석은 Norton이 마음대로 표시하고 있는 녀석입니다.

<Controller
        name="email"
        control={control}
        defaultValue="[email protected]"
        render={({ field }) => (
          <TextField
            {...field}
            type="email"
            label="Email"
            variant="outlined"
            error={!!errors.email}
            helperText={errors.email ? errors.email?.message : ""}
          />
        )}
      />

주의점

default value를 지정하지 않으면 오류가 발생합니다. defaultValue=""등을 지정하는 것으로 회피할 수 있습니다.

전체 코드

import { Button, TextField } from "@mui/material";
import { useForm, SubmitHandler, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

// submitされる値の型定義
type IFormInputs = {
  email: String;
  password: string;
};

// submitをハンドリング
const formSubmitHandler: SubmitHandler<IFormInputs> = (data) => {
  console.log(data);
};

// スキーマ
const schema = yup.object().shape({
  email: yup
    .string()
    .email("メールの書式に従ってください")
    .required("emailは必須です"),
  password: yup
    .string()
    .min(4, "4桁以上必須")
    .max(20, "最大20桁")
    .required("必須です")
});

export default function App() {
  // useForm
  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(schema)
  });

  // JSX
  return (
    <form onSubmit={handleSubmit(formSubmitHandler)}>
      <Controller
        name="email"
        control={control}
        defaultValue="[email protected]"
        render={({ field }) => (
          <TextField
            {...field}
            type="email"
            label="Email"
            variant="outlined"
            error={!!errors.email}
            helperText={errors.email ? errors.email?.message : ""}
          />
        )}
      />
      <br />
      <br />
      <Controller
        name="password"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            type="password"
            label="Password"
            variant="outlined"
            error={!!errors.password}
            helperText={errors.password ? errors.password?.message : ""}
          />
        )}
      />
      <br />
      <br />
      <input type="submit" />
    </form>
  );
}

끝에

이상이 됩니다. 끝까지 읽어 주셔서 감사합니다.

※part4가 있으면, formProvider에 대해 씁니다.