react-hook-form 시작하기

 

서비스 개발시 form은 필수적으로 활용될 것이다.

로그인 같은 경우도 정말 단순한 기능같지만, 실제로 개발자는

데이터 핸들링, validation체크, 에러 팝업, 데이터 submit 등 많은 것들을 고려해야한다.

이때 React Hook Form이란 라이브러리를 사용하여 훨씬 효율적인 코드를 짤 수 있다.

npm install react-hook-form

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

 

1. useForm()이 return해줄 객체를 담을 변수를 생성한다.

const form = useForm();

 

Register

useForm hook이 제공하는 여러 method가있다.

const { register } = form

const { name, ref, onChange, onBlur } = register("username")

return (
   <div>
        <form>
            <label>Name</label>
            <input
                type="text"
                name={userName}
                ref={ref}
                onChange={onChange}
                onBlur={onBlur}
            />
            <label>Age</label>
            <input
                type="text"
                name={age}
                ref={ref}
                onChange={onChange}
                onBlur={onBlur}
            />
            <label>Address</label>
            <input
                type="text"
                name={address}
                ref={ref}
                onChange={onChange}
                onBlur={onBlur}
            />
        </form>
    </div>
)

 

 

register는 form object에 access할수있다. 그리고 이 register 메소드는 또 4개의 메소드(name, ref, onChange, onBlur)를 리턴한다. 하지만 이 경우 모든 field마다 props를 넣어주어야한다는 귀찮음이 있으니 spread operator을 사용해준다.

const { register } = form

return (
   <div>
        <form>
            <label>Name</label>
            <input
                type="text"
                {...register("userName")}
            />
            <label>Age</label>
            <input
                type="text"
                {...register("age")}
            />
            <label>Address</label>
            <input
                type="text"
                {...register("address")}
            />
        </form>
    </div>
)

 

 

인풋값을 입력 받아 register로 form에 access해주었다면 이제 이 data를 제출해보자

Submission

const form = useForm<FormValues>();
const { register, handleSubmit } = form;

type FormValues = {
	username: string;
    age: string;
    address: string;
}

export const example = () => {

    // submit버튼이 클릭되었을때
    const onSubmit = (data:FormValues) => {
        console.log('submitted!')
    }

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <label>Name</label>
                <input type="text" {...register("userName")}/>
                .
                .
                .
    )
 }

 

handleSubmit 메소드를 사용하면 form hook이 알아서 onSubmit함수로 data를 보내준다. 

data의 타입도 지정해주자

submit하는 데이터의 validation을 체크해줄수있다.

 

Form Validation

required(필수값), minLength & maxLength, pattern등 모두 체크해줄수있다.

 <form onSubmit={handleSubmit(onSubmit)}>
        <label>Name</label>
        <input type="text" {...register("userName", {
        	required: 'useName is required',
        })}/>

required을 체크하고싶으면 required object를 register의 argument로 넣어주면된다.