Formik 및 Yup을 사용한 Fluent UI React v9

이 게시물은 Formik 문서의 문서 예제에서 영감을 받았습니다.

이 자습서에서는 사용자가 Formik 및 Yup 에 대해 이전에 작업한 경험이 있다고 가정합니다. 그렇다면 이것은 Formik 소품을 해당 Fluent UI React 구성 요소에 매핑하는 연습이 됩니다.

이 튜토리얼은 Formik의 높은 수준의 사용법을 다루지만 자세한 내용은 설명서를 읽어보는 것이 좋습니다.

1. 필요한 종속성을 설치합니다.

이 예에서는 다음 npm 종속성을 설치하는 것이 좋습니다.

npm install formik 양식 데이터 처리

npm install yup 값 구문 분석 및 유효성 검사용

npm install @fluentui/react-components - 양식 구성 요소용

npm install @fluentui/react-icons - 아이콘용

2. 양식 작성

이 예제에서는 다음과 같은 로그인 환경을 구축하고 있으며 UI 구성과 Formik 및 Yup 유효성 검사 추가를 분석합니다.

CSS-in-JS로 양식 레이아웃 작성

Fluent UI React와 함께 제공되는 CSS-in-JS 엔진인 Griffel을 활용하는 형식의 상위 수준 레이아웃부터 시작합니다.

CSS Flexbox를 사용하여 최대 너비가 480px인 세로 스택에 모든 것을 배치해 보겠습니다.

const useStyles = makeStyles({
  form: {
    display: "flex",
    flexDirection: "column",
    maxWidth: "480px"
  }
});

className 의 form 소품을 사용하여 UI에 적용합니다.

export default function App() {
  const c = useStyles();
  return (
    <FluentProvider theme={webLightTheme}>
        <form className={c.form}>
        </form>
    </FluentProvider>
  );
}

Fluent UI React 구성 요소에 추가

Input , Label 및 Button 구성 요소를 사용합니다.

또한 확인 후 오류 메시지를 표시하는 데 도움이 되는 작은ErrorText 구성 요소를 만들었습니다.

export default function App() {
  const c = useStyles();
  const inputId = useId("input");
  const passId = useId("pass");
  return (
    <FluentProvider theme={webLightTheme}>
        <form className={c.form}>
          <Label htmlFor={inputId} required>
          Email
          </Label>
          <Input
            id={inputId}
            name="email"
            placeholder="[email protected]"
          />
          <ErrorText />
          <Label htmlFor={passId} required>
          Password
          </Label>
          <Input
            id={passId}
            name="password"
            type="password
           />
          <ErrorText />
          <Button appearance="primary" type="submit">
          Login
          </Button>
        </form>
    </FluentProvider>
  );
}

3. Formik 및 Yup에 추가

마지막으로 양식 데이터를 처리하기 위해 Formik을 추가하고 양식 구문 분석 및 유효성 검사를 만들기 위해 Yup을 추가합니다.

Yup 유효성 검사 선언

전자 메일 및 암호 항목에 대한 간단한 유효성 검사를 설정해 보겠습니다.

const validationSchema = yup.object({
  email: yup
    .string()
    .email("Enter a valid email")
    .required("Email is required"),
  password: yup
    .string()
    .min(8, "Password should be of minimum 8 characters length")
    .required("Password is required")
});

Formik 초기 값을 선언하고 유효성 검사를 할당하고 제출 작업을 정의합니다.

이 예에서 onSubmit는 양식의 값만 alert이지만 이것이 모든 백엔드 서비스를 호출할 수 있다고 상상할 수 있습니다.

const formik = useFormik({
  initialValues: {
    email: "",
    password: ""
  },
  validationSchema: validationSchema,
  onSubmit: (values) => {
    alert(JSON.stringify(values, null, 2));
  }
});

Fluent UI React 구성 요소에 Formik 소품 매핑

Fluent UI React Component 소품과 Formik 소품을 일치시키기만 하면 된다는 점에서 이것은 매우 간단합니다.

<form onSubmit={formik.handleSubmit}>
  <Input 
    value={formik.values.email}
    onBlur={formik.handleBlur}
    onChange={formik.handleChange}
  />
  ...
  <Button appearance="primary" type="submit">Login</Button>
</form>

여기서 아이디어를 얻어야 합니다.

항상 그렇듯이 전체 CodesandBox는 다음과 같습니다.


마지막으로 ErrorText 구성 요소를 확인하십시오. 일부 CSS-in-JS, 디자인 토큰, Fluent UI React 아이콘 및 HTML이 포함된 React 기능 구성 요소일 뿐입니다.

보고 싶은 다른 코드 예제가 있는지 알려주고 언제든지 팀에 연락하십시오!

GitHub: https://github.com/microsoft/fluentui

문서: https://react.fluentui.dev

트위터:

감사!