귀찮은 폼을 간단하게 만들자! react-hook-form 사용법

김태경·2022년 10월 4일

🤔 FE 여러분 로그인, 입력 페이지 만들 때 너무 귀찮죠? 재미도 없고 입력이 많아질 수록 코드도 길어지고 검증(validation)이 많다면 더더욱 ...ㅎㅎ

🤭 기술은 항상 문제를 해결하기 위해 만들어집니다.
오늘의 문제 해결사는 React-hook-form 입니다.
폼을 만들 때 굉장히 유용하고 섹시하게 사용할 수 있습니다!

다운 받기

npm i react-hook-form

useForm 사용

const { register, watch, handleSubmit, formState, setError, setValue } = useForm();

useForm은 폼을 만들 때 사용하기 유용한 여러가지 함수들을 반환해 주는데 오늘은 그 중 자주 사용하는 함수 6가지를 알아보자!

📝 useForm에서 자주 사용하는 함수 6가지!

register

watch

handleSubmit

formState

setError

setValue

1. 🦎 register 함수

const { register } = useForm();

<input {...register("email")} /> 
<input {...register("name", { required: {value: true, message: "필수 항목이에욤!"} })} />
<input {...register("password")} />

register 함수는
간단하게 말하면 인자로 식별할 문자열을 넣어주면 자동으로
onChange, onBlur 함수를 만들어 반환해 주는 함수이고
추가로 원하는 valid 조건들을 오브젝트로 인자에 넣어 줄 수 있다.

register 함수는 아래와 같은 오브젝트를 반환한다.
{ name: "인자로 넣은 문자열", onChange: f, onBlur: f, ref: f }
onChange, onBlur는 다들 아는 input, button 등 속성으로 줄 수 있는 함수임

그래서 input 태그 안에 { ...register("식별자") }(spread 연산자) 를 넣어주면 onChange, onBlur가 자동으로 속성이 연결됨. (매우 간편!!!)

2. 🐊 watch 함수

const { register, watch } = useForm();

<input {...register("email")} /> 
<input {...register("name")} />
<input {...register("password")} />

watch 함수는
register의 onChange, onBlur 함수가 사용된 폼의 입력값을 추적해 주는 함수

현재 위 코드에서 watch를 출력해 보면 email, name, password를
key 값으로 가지는 오브젝트가 출력된다.

3. 🐍 handleSubmit 함수

const { register, watch, handleSubmit } = useForm();

const onValid = () => {
	console.log("확인!");
};

const inOnValid = () => {
	console.log("안돼 돌아가!");
};

<form onSubmit={handleSubmit(onValid, onInValid)}>
	<input {...register("email")} /> 
	<input {...register("name")} />
	<input {...register("password")} />
</form>

handleSubmit 함수는
form 태그의 onSubmit 속성의 값으로 할당해 주는데 해당 폼의 데이터가 유효할 때 (onValid) 와 유효하지 않을 때 (onInValid) 를 구분하여 handleSubmit의 인자로 받은 onValid 또는 onInValid함수를 실행함

위 코드와 같이 handleSubmit 함수는 2가지 인자를 받는다.
( 데이터가 유효한 경우 실행할 함수, 유효하지 않을 경우 실행할 함수 )
onValid와 onInValid 자리에 원하는 함수를 만들어서 넣어주면 됨!

🤔 근데 데이터가 유효한지 어캐 알고 실행하는 거지?

<form onSubmit={handleSubmit(onVaild, onInVaild)}>
    <input {...register("name", { minLength: { value: 10, message: "10줄 이상 적자이" } })} />
</form>

/* form 내부의 register에서 인자로 조건들을 선언해주면 알아서 처리하여
데이터가 유효하면 onValid 유효하지 않으면 onInValid 함수를 실행한다! */

🤔 오호... 그럼 어디서 어떤 에러가 생기는지 확인할 수는 없나요?

🤖 있습니다!! formState 쓰세요.

4. 🦕 formState 함수

const { register, watch, handleSubmit, formState } = useForm();

const onValid = () => {
	console.log("확인!");
};

const inOnValid = () => {
	console.log("안돼 돌아가!");
  	console.log(formState.errors);
};

<form onSubmit={handleSubmit(onValid, onInValid)}>
	<input {...register("email")} /> 
	<input {...register("name")} />
	<input {...register("password")} />
</form>

formState 함수는
유효하지 않은 각 register들의 name, type(onInVaild 원인), message를 받을 수 있음. 여기서 message는 register 조건에서 넣어준 message임! (신기하죠)

5. 🐉 setError 함수

const { register, handleSubmit, setError } = useForm();

const onValid = (data: any) => {
  	if (data.name === "남세") {
    	setError("name", { message: "남세 발 좀 씻자!" });
    }
	console.log("확인!");
  	
};

const inOnValid = () => {
	console.log("안돼 돌아가!");
};

<form onSubmit={handleSubmit(onValid, onInValid)}>
	<input {...register("email")} /> 
	<input {...register("name")} />
	<input {...register("password")} />
</form>

setError 함수는
데이터는 유효하지만(onValid) 추가로 에러 헨들링을 하고 싶을 때 사용함

즉, 검증은 된 유효한 데이터지만 조건을 체크해서 위와 같이 커스텀 에러를 생성하고 싶을 때 사용합니다!

첫 번째 인자로 에러를 헨들링할 register의 name을 넣어주고
{ message: '이름이 일치하지 않습니다.' } 처럼 띄울 에러 메시지를 넣어주면 됨!

6. 🐸 setValue 함수

const { register, setValue } = useForm();

const onValid = (data: any) => {
  	setValue(data.name, "");
	console.log("확인!");
  	
};

const inOnValid = () => {
	console.log("안돼 돌아가!");
};

<form onSubmit={handleSubmit(onValid, onInValid)}>
	<input {...register("email")} /> 
	<input {...register("name")} />
	<input {...register("password")} />
</form>