Formik을 사용하여 React에서 양식 유효성 검사

38569 단어 reactwebdevjavascripthacktoberfest
저번에 올린 글에 이은 글입니다. 이 게시물에서는 유사한 접근 방식을 사용하고 React를 사용하여 웹 기반 구현을 만듭니다. 동일한 유효성 검사 스키마(Yup 사용)를 사용합니다. 또한 Material UI을 사용하여 동일한 양식 필드를 사용합니다.

프로젝트 설정



프로젝트 초기화



CRA 도구 체인을 사용하여 간단한 React 프로젝트를 만듭니다.

npx create-react-app react-formik-example


종속성 설치



애플리케이션으로 이동하여 이러한 종속성을 설치합니다.

cd react-formik-example
npm install @mui/material @emotion/react @emotion/styled formik yup


양식 디자인



Material UI를 사용하여 간단한 등록 양식을 만들어 봅시다. 이 구성 요소의 경로는 src/pages/Register.jsx 입니다.

import React from 'react';
import { Box, Button, TextField } from '@mui/material';

export const Register = () => {
  return (
    <Box mt={5}>
      <Box mb={1}>
        <TextField label="First Name" variant="outlined" />
      </Box>
      <Box mb={1}>
        <TextField label="Last Name" variant="outlined" />
      </Box>
      <Box mb={1}>
        <TextField label="Email Address" variant="outlined" type="email" />
      </Box>
      <Box mb={1}>
        <TextField label="Phone Number" variant="outlined" />
      </Box>
      <Box mb={1}>
        <TextField label="Password" variant="outlined" type="password" />
      </Box>
      <Box mb={1}>
        <TextField
          label="Confirm Password"
          variant="outlined"
          type="password"
        />
      </Box>

      <Button>Register</Button>
    </Box>
  );
};


등록 구성 요소를 표시하도록 App.js를 업데이트합니다.

import './App.css';
import { Register } from './pages/Register';

function App() {
  return (
    <div className="App">
      <Register />
    </div>
  );
}

export default App;


지금 npm start를 실행하면 양식이 표시됩니다.



검증 스키마 생성



Yup을 사용하여 유효성 검사 스키마를 생성해 보겠습니다. 이 파일의 경로는 src/schemas/register.form.js 입니다.

import * as yup from 'yup';

export const registerSchema = yup.object().shape({
  firstName: yup.string().required('First Name is required'),
  lastName: yup.string().required('Last Name is required'),
  email: yup.string().email('Invalid email').required('Email is required'),
  phoneNumber: yup
    .string()
    .matches(/^[0-9]+$/, 'Must be only digits')
    .min(9, 'Must be exactly 9 digits')
    .max(9, 'Must be exactly 9 digits')
    .required('Phone Number is required'),
  password: yup
    .string()
    .min(8, ({ min }) => `Password must be at least ${min} characters`)
    .required('Password is required'),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref('password'), null], 'Passwords must match')
    .required('Confirm Password is required'),
});

export const registerInitialValues = {
  firstName: '',
  lastName: '',
  email: '',
  phoneNumber: '',
  password: '',
  confirmPassword: '',
};


Yup의 API는 이해하고 사용하기 매우 쉽습니다. 예를 들어 스키마의 firstName 필드는 필수 문자열 스키마인 yup.string().required('First Name is required')에 매핑됩니다. 이 필드에 값이 제공되지 않으면 양식이 유효하지 않습니다. 예, 단일 필드에 대한 여러 유효성 검사 규칙을 변경할 수도 있습니다. 예를 들어 phoneNumber 필드에는 일치, 최소, 최대 및 필수와 같은 여러 유효성 검사 규칙이 있습니다. 자세한 내용은 Yup API 문서를 확인하세요.

포르믹 추가



Formik을 양식에 추가하는 가장 간단한 방법은 useFormik 후크를 사용하는 것입니다. 후크를 사용하도록 src/screens/Register.component.js를 업데이트합니다.

...
import { useFormik } from 'formik';
import { registerInitialValues, registerSchema } from '../schemas/register.form';

export const Register = () => {
  const formik = useFormik({
    initialValues: registerInitialValues,
    validationSchema: registerSchema,
    onSubmit: (values) => {
      console.log(values);
      Alert.alert(
        `Welcome, ${values.firstName}`,
        'Your account has been created.'
      );
    },
  });

...


각 필드의 formik 상태를 처리하도록 TextField 구성 요소를 업데이트합니다. 예를 들어 First Name 구성 요소는 다음과 같아야 합니다.

<TextField
  label="First Name"
  variant="outlined"
  onChange={formik.handleChange('firstName')}
  onBlur={formik.handleBlur('firstName')}
  value={formik.values?.firstName}
  error={formik.touched.firstName && Boolean(formik.errors.firstName)}
  helperText={formik.touched.firstName && formik.errors.firstName}
/>


양식 제출을 처리하도록 버튼 구성 요소 업데이트

<Button onClick={formik.handleSubmit}>Register</Button>


등록 구성 요소는 다음과 같아야 합니다.

import React from 'react';
import { Box, Button, TextField } from '@mui/material';
import { useFormik } from 'formik';
import {
  registerInitialValues,
  registerSchema,
} from '../schemas/register.form';

export const Register = () => {
  const formik = useFormik({
    initialValues: registerInitialValues,
    validationSchema: registerSchema,
    onSubmit: (values) => {
      console.log(values);
      alert(`Welcome, ${values.firstName}`, 'Your account has been created.');
    },
  });

  return (
    <Box mt={5}>
      <Box mb={1}>
        <TextField
          label="First Name"
          variant="outlined"
          onChange={formik.handleChange('firstName')}
          onBlur={formik.handleBlur('firstName')}
          value={formik.values?.firstName}
          error={formik.touched.firstName && Boolean(formik.errors.firstName)}
          helperText={formik.touched.firstName && formik.errors.firstName}
        />
      </Box>
      <Box mb={1}>
        <TextField
          label="Last Name"
          variant="outlined"
          onChange={formik.handleChange('lastName')}
          onBlur={formik.handleBlur('lastName')}
          value={formik.values?.lastName}
          error={formik.touched.lastName && Boolean(formik.errors.lastName)}
          helperText={formik.touched.lastName && formik.errors.lastName}
        />
      </Box>
      <Box mb={1}>
        <TextField
          label="Email Address"
          variant="outlined"
          type="email"
          onChange={formik.handleChange('email')}
          onBlur={formik.handleBlur('email')}
          value={formik.values?.email}
          error={formik.touched.email && Boolean(formik.errors.email)}
          helperText={formik.touched.email && formik.errors.email}
        />
      </Box>
      <Box mb={1}>
        <TextField
          label="Phone Number"
          variant="outlined"
          onChange={formik.handleChange('phoneNumber')}
          onBlur={formik.handleBlur('phoneNumber')}
          value={formik.values?.phoneNumber}
          error={
            formik.touched.phoneNumber && Boolean(formik.errors.phoneNumber)
          }
          helperText={formik.touched.phoneNumber && formik.errors.phoneNumber}
        />
      </Box>
      <Box mb={1}>
        <TextField
          label="Password"
          variant="outlined"
          type="password"
          onChange={formik.handleChange('password')}
          onBlur={formik.handleBlur('password')}
          value={formik.values?.password}
          error={formik.touched.password && Boolean(formik.errors.password)}
          helperText={formik.touched.password && formik.errors.password}
        />
      </Box>
      <Box mb={1}>
        <TextField
          label="Confirm Password"
          variant="outlined"
          type="password"
          onChange={formik.handleChange('confirmPassword')}
          onBlur={formik.handleBlur('confirmPassword')}
          value={formik.values?.confirmPassword}
          error={
            formik.touched.confirmPassword &&
            Boolean(formik.errors.confirmPassword)
          }
          helperText={
            formik.touched.confirmPassword && formik.errors.confirmPassword
          }
        />
      </Box>

      <Button onClick={formik.handleSubmit}>Register</Button>
    </Box>
  );
};


그게 다야. Formik을 사용하여 유효성 검사가 포함된 양식을 성공적으로 생성했습니다.

테스트할 프로젝트의 루트 디렉터리를 실행합니다npm start.

결론



이 자습서에서는 Formik(및 Material UI)을 사용하여 React에서 유효성 검사가 포함된 양식을 만드는 방법을 배웠습니다. 또한 useFormik 후크를 사용하여 양식 상태를 처리하고 유효성 검사 규칙을 정의하는 방법도 배웠습니다.

소스 코드



GitHub에서 사용 가능합니다.

반응이 처음이신가요?



저는 1대1, 페어 프로그래밍 스타일의 React 원격 교육을 제공하고 있습니다. Apply here .
【초보자용】홈페이지의 배경색에 사용할 수 있는 색·화상 정리
애플리케이션에 서비스 레이어를 생성해야 하는 좋은 이유

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage