내 생각에 제출하기 전에 양식에 대한 사용자 입력을 확인하는 것은 요즘 웹 사이트에서 가장 중요하고 근본적인 것 중 하나입니다.

감사하게도 우리는 그것들을 검증할 수 있는 몇 가지 옵션이 있습니다. React 생태계에는 많은 라이브러리가 있습니다. 그러나 이러한 라이브러리 중 다수는 필드가 거의 없는 형식으로 구현하는 경우에도 때때로 무서운 거대한 상용구를 가지게 됩니다. 또는 응용 프로그램 성능을 저하시킵니다.

이러한 점을 염두에 두고 저는 항상 간단하고 상용구가 적고 성능이 뛰어난 솔루션을 찾게 됩니다.

그 외에도 내가 찾고 있는 또 다른 것은 라이브러리를 사용하여 Joi, Yup 등과 같은 스키마의 유효성을 검사할 수 있는 양식 유효성 검사 라이브러리입니다. 이렇게 하면 프런트엔드와 백엔드에서 스키마 코드를 재사용할 수 있습니다.

내가 React Hook Form 작업을 좋아하는 이유는 바로 이 때문입니다.

코딩하자

먼저 React 애플리케이션에 다음 종속성을 추가합니다.

npm install react-hook-form @hookform/resolvers yup

이제 이것이 귀하의 양식이라고 가정해 보겠습니다.

import React from "react";

const App = () => {
  return (
    <form>
      <h2>Lets sign you in.</h2>
      <br />

      <input placeholder="email" type="email" required />
      <br />

      <input
        placeholder="password"
        type="password"
        required
      />
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

export default App;

이제 React Hook Form를 프로젝트로 가져오겠습니다.

import React from "react";
import { useForm } from "react-hook-form";
// Hidden for simplicity

그런 다음 useForm() 후크에서 다음 항목을 가져옵니다.

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm();
  return (
    // Hidden for simplicity
};

빠른 개요

register() 메서드를 사용하면 요소를 등록하고 적절한 유효성 검사 규칙을 적용할 수 있습니다.

유효성 검사가 성공하면 handleSubmit() 함수가 양식 데이터를 수신합니다.

reset() 함수는 모든 양식 필드를 지우거나 초기 값으로 재설정합니다.

이 경우 양식 오류를 더 쉽게 반환하기 위해 formState를 사용하고 있습니다.

이제 Yup을 프로젝트로 가져온 다음 스키마를 생성해야 합니다.

// Hidden for simplicity
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(8).max(32).required(),
});

이제 Yup 스키마를 사용하여 입력 값의 유효성을 검사할 수 있도록 가져와야 합니다@hookform/resolvers. 이와 같이:

import { yupResolver } from "@hookform/resolvers/yup";

// Hidden for simplicity

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(schema),
  });
  return (
    // Hidden for simplicity
};

이제 데이터를 제출하는 함수를 만들어야 합니다(이 예제에서는 간단한 로그가 됩니다). 양식 입력이 제출되는 즉시 지워지도록 함수 내에 reset() 메서드를 추가하는 것과 같습니다.

마지막으로 handleSubmit() 메서드를 양식에 추가해 보겠습니다. 이것과 비슷합니다:

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmitHandler = (data) => {
    console.log({ data });
    reset();
  };
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      // Hidden for simplicity
    </form>
};

다음 단계는 스키마의 속성에 따라 이름을 지정하여 입력을 등록하는 것입니다.

const App = () => {
  // Hidden for simplicity
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

마지막으로 각 입력에 대한 오류 메시지를 추가해 보겠습니다.

const App = () => {
  // Hidden for simplicity
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <p>{errors.email?.message}</p>
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <p>{errors.password?.message}</p>
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

이제 모든 작업이 완료되면 코드는 다음과 같아야 합니다.

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(8).max(32).required(),
});

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmitHandler = (data) => {
    console.log({ data });
    reset();
  };
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <p>{errors.email?.message}</p>
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <p>{errors.password?.message}</p>
      <br />

      <button type="submit">Sign in</button>
    </form>
  );
};

export default App;

최종 결과에 대한 아이디어를 얻으려면 gif에서 보는 것과 비슷한 내용이 있어야 합니다.

당신은 어때요

React에서 양식의 유효성을 검사하기 위해 어떤 라이브러리를 사용합니까?