[React] 리액트에서 폼 유효성 검사하기(Formik, Yup, react-hook-form)

이 게시물에서는 리액트에서 폼 유효성 검사를 구현하는 여러 방법을 소개합니다. JavaScript를 이용한 기본 검증 방식부터, Yup, Formik, 그리고 성능 최적화에 강점이 있는 react-hook-form까지 비교하여 설명하겠습니다.🙂

 

1️⃣ JavaScript로 직접 구현하는 경우

리액트에서 가장 기본적인 방식으로, 유효성 검사를 JavaScript로 직접 구현하는 방법입니다.

import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');✨
  const [age, setAge] = useState('');✨
  const [errors, setErrors] = useState({});✨

  const handleSubmit = (e) => {✨
    e.preventDefault();
    const newErrors = {};

    if (!name) newErrors.name = '이름을 입력하세요';
    if (!age) newErrors.age = '나이를 입력하세요';
    else if (age <= 0) newErrors.age = '나이는 0보다 커야 합니다';

    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      // 유효성 검사가 통과된 경우 처리 로직
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>이름✨</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        {errors.name && <div className="error">{errors.name}</div>}
      </div>
      <div>
        <label>나이✨</label>
        <input type="number" value={age} onChange={(e) => setAge(e.target.value)} />
        {errors.age && <div className="error">{errors.age}</div>}
      </div>
      <button type="submit">제출✨</button>
    </form>
  );
}

장점

• 간단한 로직을 직접 구현 가능.
• 별도의 라이브러리 없이 바로 검증 로직 작성 가능.

단점

• 검증할 항목이 많아질수록 코드가 길어지고 복잡해질 수 있음.
• 중복된 검증 로직을 여러 곳에서 작성할 수 있음.

 

2️⃣ Yup만 사용하는 경우

Yup은 폼 유효성 검사를 위한 스키마 기반 라이브러리입니다. Formik 없이도 사용할 수 있으며, 다양한 규칙을 간결하게 선언할 수 있습니다.

import { useState } from 'react';
import * as Yup from 'yup';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', age: '' });✨
  const [errors, setErrors] = useState({});

  // Yup 스키마 정의✨
  const validationSchema = Yup.object().shape({
    name: Yup.string().required('이름을 입력하세요'),
    age: Yup.number()
      .required('나이를 입력하세요')
      .positive('나이는 0보다 커야 합니다')
      .integer('나이는 정수여야 합니다'),
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await validationSchema.validate(formData, { abortEarly: false });✨
      setErrors({});
      // 유효성 검사를 통과한 경우 처리 로직
    } catch (err) {
      setErrors(err.inner.reduce((acc, error) => ({ ...acc, [error.path]: error.message }), {}));
    }
  };

  const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>이름</label>
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
        {errors.name && <div className="error">{errors.name}</div>}
      </div>
      <div>
        <label>나이</label>
        <input type="number" name="age" value={formData.age} onChange={handleChange} />
        {errors.age && <div className="error">{errors.age}</div>}
      </div>
      <button type="submit">제출</button>
    </form>
  );
}

export default MyForm;

장점

• 복잡한 유효성 검사를 간단하게 처리할 수 있음.
• Yup의 다양한 검증 규칙을 활용 가능.
• Formik 없이도 유효성 검사를 쉽게 구현 가능.

단점

• 폼 상태를 직접 관리해야 함.
• Formik이 제공하는 폼 관리 기능을 사용할 수 없음.

 

3️⃣ Formik만 사용하는 경우

Formik은 폼 관리를 간편하게 할 수 있는 라이브러리입니다. validate 속성을 사용하여 폼 유효성 검사를 할 수 있습니다.

import { Formik } from 'formik';

<Formik✨
  initialValues={{ name: '', age: '' }}
  validate={values => {
    const errors = {};
    if (!values.name) errors.name = '이름을 입력하세요';
    if (!values.age) errors.age = '나이를 입력하세요';
    else if (values.age <= 0) errors.age = '나이는 0보다 커야 합니다';
    return errors;
  }}
  onSubmit={(values) => {
    // 유효성 검사가 통과된 경우 처리 로직
  }}
>
  {({ handleChange, handleSubmit, values, errors }) => (✨
    <form onSubmit={handleSubmit}>
      <div>
        <label>이름</label>
        <input type="text" name="name" value={values.name} onChange={handleChange} />
        {errors.name && <div className="error">{errors.name}</div>}
      </div>
      <div>
        <label>나이</label>
        <input type="number" name="age" value={values.age} onChange={handleChange} />
        {errors.age && <div className="error">{errors.age}</div>}
      </div>
      <button type="submit">제출</button>
    </form>
  )}
</Formik>

장점

• 폼 관리와 유효성 검사를 한 곳에서 처리 가능.
• 간단한 검증 로직은 Formik 내에서 처리할 수 있음.

단점

• 복잡한 검증 로직을 구현할 때 코드가 길어질 수 있음.

 

4️⃣ Formik + Yup을 사용하는 경우( 복잡한 유효성 검사 👍🏻)

Formik과 Yup을 함께 사용하면 폼 관리는 Formik이, 유효성 검사는 Yup이 담당합니다. 이 방식은 복잡한 유효성 검사를 간결하게 처리할 수 있습니다.

import { Formik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({✨
  name: Yup.string().required('이름을 입력하세요'),
  age: Yup.number().required('나이를 입력하세요').positive('나이는 0보다 커야 합니다').integer('나이는 정수여야 합니다'),
});

<Formik✨
  initialValues={{ name: '', age: '' }}
  validationSchema={validationSchema}
  onSubmit={(values) => {
    // 유효성 검사가 통과된 경우 처리 로직
  }}
>
  {({ handleChange, handleSubmit, values, errors }) => (
    <form onSubmit={handleSubmit}>✨
      <div>
        <label>이름</label>
        <input type="text" name="name" value={values.name} onChange={handleChange} />
        {errors.name && <div className="error">{errors.name}</div>}
      </div>
      <div>
        <label>나이</label>
        <input type="number" name="age" value={values.age} onChange={handleChange} />
        {errors.age && <div className="error">{errors.age}</div>}
      </div>
      <button type="submit">제출</button>
    </form>
  )}
</Formik>

장점

• 폼 관리와 유효성 검사를 각각 Formik과 Yup에서 담당.
• 간결한 코드로 복잡한 유효성 검사를 처리할 수 있음.
• 검증 스키마를 재사용할 수 있음.

단점

• Yup을 추가로 설치해야 함.
• 매우 간단한 폼일 경우, 불필요하게 느껴질 수 있음.

코드 비교해보기(JavaScript로 직접 구현하는 경우와 비교)

0

 

5️⃣ react-hook-form을 사용하는 경우( 간단한 유효성 검사 👍🏻)

react-hook-form은 리액트에서 간단하고 성능 좋은 폼 관리 및 유효성 검사를 제공하는 라이브러리입니다. useForm 훅을 통해 폼의 상태를 초기화하고, 필드와 연결된 상태를 자동으로 관리할 수 있으며, register 함수로 입력 필드를 폼에 쉽게 등록할 수 있습니다. 또한, watch를 사용하여 특정 필드 값을 실시간으로 모니터링하거나, 유효성 검사 규칙을 추가하여 다양한 폼 검증을 간편하게 수행할 수 있습니다. 이를 통해 리액트에서 폼 처리 로직을 간결하게 유지하면서도 성능을 최적화할 수 있습니다.

* Formik은 Yup과 함께 쓰는 경우가 많고, react-hook-form은 간단하게 쓰이는 경우가 많아 Yup과 함께 쓰는 경우가 적습니다.

import { useForm } from 'react-hook-form';

function MyForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm(); // ✨ useForm 훅을 사용하여 폼을 관리

  const onSubmit = (data) => {
    // 유효성 검사가 통과된 경우 처리 로직
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>이름</label>
        <input {...register('name', { required: '이름을 입력하세요' })} />✨
        {errors.name && <div className="error">{errors.name.message}</div>}
      </div>
      <div>
        <label>나이</label>
        <input
          type="number"
          {...register('age', {
            required: '나이를 입력하세요',
            min: { value: 1, message: '나이는 0보다 커야 합니다' },
          })}
        />
        {errors.age && <div className="error">{errors.age.message}</div>}
      </div>
      <button type="submit">제출</button>
    </form>
  );
}