[React] Yup

Yup 이란?

React에서 폼을 간편하게 관리하고, 유효성 검사를 수행하는데 있어서 유용한 라이브러리이다.
주로, validation (유효성 검사) 에서 많이 사용된다.

yup 공식문서 설명

yup 공식문서

주요 기능:
1. 간결하면서도 표현력이 뛰어난 스키마 인터페이스로, 간단한 데이터 모델부터 복잡한 데이터 모델까지 설계 가능
2. 강력한 TypeScript 지원: 스키마에서 정적 타입을 추론하거나, 스키마가 올바르게 타입을 구현하는지 확인
3. 내장된 비동기 검증 지원: 서버 측 및 클라이언트 측 검증을 동일하게 모델링 가능
4. 확장성: 타입 안정성이 보장된 메서드와 스키마를 추가할 수 있음
5. 풍부한 오류 세부 정보 제공으로 디버깅이 쉬움

설치

yarn add react-hook-form yup

사용방법

1. useForm hook을 불러온다.

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

const SignUpPage = () => {
    const {register, handleSubmit} = useForm();

    const onSubmit = () => {
        console.log('폼 데이터 제출')
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input type={'email'}/>
            <input type={'password'}/>
            <input type={'submit'}/>
        </form>
    );
};

export default SignUpPage;

2. spread 연산자를 사용해서 register 를 통해서 각각의 input에 연결해준다.

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

const SignUpPage = () => {
    const {register, handleSubmit} = useForm();

    const onSubmit = (data) => {
        console.log(data);
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input type={'email'} {...register("email")}/>
            <input type={'password'} {...register("password")}/>
            <input type={'submit'}/>
        </form>
    );
};

export default SignUpPage;

3. schema를 resolve 하는 과정이 필요하기 때문에 라이브러리를 설치한다.

yarn add @hookform/resolvers

4. 이메일과 비밀번호 관련해서 유효성 검사 실행

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

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

    const {register, handleSubmit} = useForm();


    const onSubmit = (data) => {
        console.log('폼 데이터 제출')
        console.log(data);
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input type={'email'} {...register("email")}/>
            <input type={'password'} {...register("password")}/>
            <input type={'submit'}/>
        </form>
    );
};

export default SignUpPage;

이렇게 하면 전체적으로 적용이 되지 않기 때문에 yupResolver를 연결해줘야한다.

    const {register, handleSubmit} = useForm({
        resolver: yupResolver(schema)
    });

에러메시지도 확인하고 싶다면,

    const {register, handleSubmit, formState: {errors}} = useForm({
        resolver: yupResolver(schema)
    });

이렇게 추가해준다.

전체코드

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

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

    const {register, handleSubmit, formState: {errors}} = useForm({
        resolver: yupResolver(schema)
    });

    const onSubmit = (data) => {
        console.log('폼 데이터 제출')
        console.log(data);
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input type={'email'} {...register("email")}/>
            <p style={{color: 'red'}}>{errors.email?.message}</p>
            <input type={'password'} {...register("password")}/>
            <p style={{color: 'red'}}>{errors.password?.message}</p>
            <input type={'submit'}/>
        </form>
    );
};

export default SignUpPage;

에러메세지 커스텀도 가능하고, yup 공식 홈페이지를 확인하면 좀 더 추가할 수 있는 기능들이 많다!

---

지금까지 validate.js로 custom-hook을 만들어서 유효성 검사를 해줬는데, 이렇게 간편한 라이브러리가 있어 두개를 번갈아가면서 쓸거 같아 적어놓는다!