React에서 Yup을 이용한 유효성 검사

 

React 애플리케이션에서 유효성 검사는 사용자 입력값의 유효성을 확인하고 올바른 데이터를 서버로 전송하는 데 필수적인 기능입니다. 이 글에서는 Yup 라이브러리를 활용하여 React에서 손쉽게 유효성 검사를 구현하는 방법을 다룹니다. Yup은 선언형이고 간결한 스키마 정의 방식으로, 복잡한 검증 로직을 단순화할 수 있습니다.

---

1. Yup 소개와 설치

Yup은 객체 스키마 검증 및 값 변환을 지원하는 JavaScript 라이브러리입니다. React에서 주로 Formik과 함께 사용되지만 독립적으로도 강력한 유효성 검사를 수행할 수 있습니다.

먼저, 프로젝트에 Yup을 설치해봅시다:

npm install yup

또한, Formik과 함께 사용할 경우에는 아래 명령으로 함께 설치합니다:

npm install formik

---

2. Yup 기본 사용법

Yup은 선언형 방식으로 스키마를 정의합니다. 이를 통해 입력값의 유형, 크기, 형식을 쉽게 검증할 수 있습니다. 아래는 Yup의 기본 사용법입니다.

import * as Yup from 'yup';

const schema = Yup.object().shape({
  name: Yup.string()
    .required('이름은 필수 입력 항목입니다.')
    .min(3, '이름은 최소 3자 이상이어야 합니다.'),
  email: Yup.string()
    .email('유효한 이메일 주소를 입력하세요.')
    .required('이메일은 필수 입력 항목입니다.'),
  age: Yup.number()
    .required('나이는 필수 입력 항목입니다.')
    .min(18, '18세 이상만 입력 가능합니다.')
});

위 코드는 이름, 이메일, 나이를 검증하는 간단한 스키마입니다. 각각의 필드는 특정 조건을 만족해야 하며, 그렇지 않을 경우 지정된 에러 메시지가 반환됩니다.

---

3. Formik과 Yup의 통합

React에서 폼 유효성 검사를 구현할 때, Formik은 강력하고 유연한 옵션을 제공합니다. Yup과의 통합을 통해 더욱 간편하게 유효성 검사를 설정할 수 있습니다.

아래는 Formik과 Yup을 사용하여 기본적인 로그인 폼을 구현한 예제입니다:

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const LoginForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema: Yup.object({
      email: Yup.string()
        .email('유효한 이메일 주소를 입력하세요.')
        .required('이메일은 필수 입력 항목입니다.'),
      password: Yup.string()
        .min(6, '비밀번호는 최소 6자 이상이어야 합니다.')
        .required('비밀번호는 필수 입력 항목입니다.'),
    }),
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="email">이메일</label>
        <input
          id="email"
          name="email"
          type="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
        />
        {formik.touched.email && formik.errors.email ? (
          <div>{formik.errors.email}</div>
        ) : null}
      </div>
      <div>
        <label htmlFor="password">비밀번호</label>
        <input
          id="password"
          name="password"
          type="password"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.password}
        />
        {formik.touched.password && formik.errors.password ? (
          <div>{formik.errors.password}</div>
        ) : null}
      </div>
      <button type="submit">로그인</button>
    </form>
  );
};

export default LoginForm;

주요 포인트:

1. initialValues: 폼의 초기 상태를 정의합니다.
2. validationSchema: Yup 스키마를 사용하여 입력값의 유효성을 설정합니다.
3. handleSubmit: 폼 제출 시 실행할 로직을 작성합니다.

---

4. Yup을 활용한 커스텀 검증 로직

Yup은 내장된 검증 로직뿐만 아니라, test 메서드를 통해 사용자 정의 검증도 제공합니다. 예를 들어, 비밀번호에 숫자가 포함되어야 한다는 조건을 추가하려면 아래와 같이 구현할 수 있습니다:

const schema = Yup.object().shape({
  password: Yup.string()
    .required('비밀번호는 필수 입력 항목입니다.')
    .test('include-number', '비밀번호에는 숫자가 포함되어야 합니다.', (value) =>
      /\d/.test(value)
    ),
});

위 코드에서는 정규식을 사용하여 입력값에 숫자가 포함되었는지 확인합니다.

---

5. Yup 스키마 재사용

복잡한 유효성 검사 로직이 여러 곳에서 반복된다면, Yup 스키마를 모듈화하여 재사용할 수 있습니다.

// validationSchemas.js
import * as Yup from 'yup';

export const emailSchema = Yup.string()
  .email('유효한 이메일 주소를 입력하세요.')
  .required('이메일은 필수 입력 항목입니다.');

export const passwordSchema = Yup.string()
  .min(6, '비밀번호는 최소 6자 이상이어야 합니다.')
  .required('비밀번호는 필수 입력 항목입니다.');

// LoginForm.js
import { emailSchema, passwordSchema } from './validationSchemas';

const loginSchema = Yup.object().shape({
  email: emailSchema,
  password: passwordSchema,
});

---

6. 실전 활용 예제: 회원가입 폼

아래는 Yup을 활용한 조금 더 복잡한 회원가입 폼의 예제입니다:

const SignUpSchema = Yup.object().shape({
  username: Yup.string()
    .min(4, '사용자 이름은 최소 4자 이상이어야 합니다.')
    .required('사용자 이름은 필수 항목입니다.'),
  email: emailSchema,
  password: passwordSchema,
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], '비밀번호가 일치하지 않습니다.')
    .required('비밀번호 확인은 필수 항목입니다.'),
});

회원가입 폼에서는 비밀번호 확인 기능과 같은 추가 검증 로직을 쉽게 추가할 수 있습니다.

---

7. 결론

Yup은 React 애플리케이션에서 유효성 검사를 구현하는 데 있어 매우 강력하고 효율적인 도구입니다. 선언적인 방식으로 스키마를 정의할 수 있어 코드를 간결하게 유지할 수 있으며, Formik과의 통합으로 더 나은 사용자 경험을 제공합니다.

React 프로젝트에서 Yup을 활용하여 안정적이고 직관적인 폼 유효성 검사를 구현해보세요! 😊