[React] react-hook-form을 이용하여 validation (유효성) 처리하기

안녕하세요. J4J입니다.

 

이번 포스팅은 react-hook-form을 이용하여 validation 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

react-hook-form 이란?

 

react-hook-form은 react를 이용하여 개발할 때 유효성을 체크할 수 있게 도와주는 모듈입니다.

 

react에서는 유효성을 체크해주는 모듈로써 사용되는 게 react-hook-form과 formilk 라는 것이 대표적으로 있는 것으로 보입니다.

 

formilk를 사용해본적이 없기 때문에 차이점에 대해서 언급하기는 힘들지만 공식 문서를 참고했을 때 react-hook-form의 이점들은 다음과 같은 것이 있는 것으로 확인됩니다.

 

• 적은 코드로 더 좋은 퍼포먼스를 보여줌
• 효율적인 re-rendering을 제공
• 빠른 속도의 mounting을 제공

 

 

 

개인적으로 react-hook-form을 사용하기 이전에는 유효성 처리를 어떤 식으로 해야 좋을지 많은 고민을 했었는데 react-hook-form을 알게 된 이후 유효성 처리를 편리하게 처리해내고 있습니다.

 

그만큼 저와 같이 유효성 처리 방식에 대해 고민하고 있던 분들에게 많은 도움이 될 수 있다고 생각하여 관련 내용들을 공유합니다.

 

 

반응형

 

 

추가적으로 react-hook-form과 같이 yup이란 것을 같이 사용할 예정입니다.

 

yup을 함께 사용할 경우 validation 처리해야 되는 요소들을 하나의 객체로써 관리할 수 있도록 도와줍니다.

 

validation 처리가 하나로 묶여지게 될 경우 코드 관리하는데 더 효율적이기 때문에 react-hook-form만 따로 사용하는 것보다 더 좋다고 생각합니다.

 

 

 

사용 방법

 

[ 1. 패키지 설치 ]

 

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

 

 

 

[ 2. 테스트 코드 ]

 

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

interface IvalidationForm {
    id: string;
    age: number;
}

const App = (): JSX.Element => {

    const schema = yup.object().shape({
        id: yup.string().required('아이디를 입력해주세요.'), // required 설정
        age: yup.number().min(3, '3이상 값을 입력해주세요.').max(10, '10이하 값을 입력해주세요.').typeError('값을 입력해주세요.'), // 최솟값, 최댓값 설정
    })

    const { register, handleSubmit, formState: { errors } } = useForm<IvalidationForm>({
        resolver: yupResolver(schema),
        defaultValues: { // 초기값 설정
            id: '',
            age: 0,
        }
    })

    const check = (data: any) => {
        console.log(data);
    }

    return (
        <div>
            <div>
                <input type="text" {...register("id")} />
                {errors.id && <h3>{errors.id.message}</h3> }

                <input type="number" {...register("age")} />
                {errors.age && <h3>{errors.age.message}</h3> }
            </div>

            <div>
                <button onClick={handleSubmit(check)}>확인</button>
            </div>
        </div>
    )
}

export default App;

 

 

 

코드에 대해 간단히 설명을 드리면 다음과 같습니다.

 

• schema → validation 처리 조건 입력
• defaultValues → 초기값 설정
• register → validation 처리할 태그에 매핑할 name을 입력하여 연결
• error → name의 validation이 만족하지 않을 경우 속성 값에 관련 내용 저장
• handleSubmit → 파라미터로 넣는 이벤트가 실행될 때 validation 확인

 

 

728x90

 

 

 위와 같이 코드를 작성한 뒤 실행해보면 다음과 같은 결과를 확인할 수 있습니다.

 

실행 결과

 

 

 

그리고 yup에 정의했던 사항들을 어긴 상태로 확인 버튼을 눌러보면 다음과 같이 schema에 정의했던 에러 문구들이 나오는 것을 확인할 수 있습니다.

 

validation 에러 발생

 

 

 

반대로 모든 사항들을 올바르게 입력하고 확인 버튼을 눌러보면 다음과 같이 관련 에러 문구들은 보이지 않고 check 이벤트가 실행되어 validation 처리되었던 데이터의 입력된 내용들을 확인할 수 있습니다.

 

validaition 통과

 

 

 

 

 

 

 

 

이상으로 react-hook-form을 이용하여 validation 처리하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.