React에서 Formik과 Yup으로 폼 검증 구현하기

React 프로젝트에서 폼 검증은 사용자 경험을 높이기 위해 중요한 요소입니다. Formik과 Yup 라이브러리를 사용하면 간편하고 체계적으로 폼 검증 로직을 작성할 수 있습니다.

1. Formik과 Yup 설치

먼저 프로젝트에 Formik과 Yup을 설치합니다.

npm install formik yup

2. 기본 폼 만들기

Formik의 useFormik 훅을 사용해 기본 폼 상태 및 제출 핸들러를 설정할 수 있습니다.

import React from 'react';
import { useFormik } from 'formik';

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

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />

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

export default SignupForm;

3. Yup으로 검증 스키마 작성하기

Yup을 활용해 각 필드에 대한 검증 규칙을 정의합니다.

import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string()
    .email('유효한 이메일 주소를 입력하세요.')
    .required('이메일은 필수 입력입니다.'),
  password: Yup.string()
    .min(6, '비밀번호는 최소 6자리입니다.')
    .required('비밀번호는 필수 입력입니다.'),
});

4. Formik에 Yup 검증 적용하기

Formik 설정 시 validationSchema 옵션에 Yup 스키마를 넣어 폼 검증을 쉽게 처리할 수 있습니다.

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

5. 에러 메시지 UI에 표시하기

Formik의 errors와 touched 상태를 활용해 입력 필드 아래에 에러 메시지를 보여줄 수 있습니다.

<input
  id="email"
  name="email"
  type="email"
  onChange={formik.handleChange}
  onBlur={formik.handleBlur}
  value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
  <div style={{ color: 'red' }}>{formik.errors.email}</div>
) : null}

위 예제를 응용하면 실무에서 흔히 쓰이는 로그인, 회원가입 폼 같은 복잡한 폼도 손쉽게 관리할 수 있습니다. Formik과 Yup은 유지보수가 쉽고 가독성 높은 폼 검증 코드를 작성하는 데 큰 도움을 줍니다.