[ReactJS] React Hook Form 사용하기

 

React Hook Form 설치 & import하기

npm i react-hook-form

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

 

 

register 함수 사용하기

const {register} = useForm();

register는 form에 input을 등록(register)할 때 사용된다.

react-hook-form은 페이지에 어떤 input이 있는지 모르기 때문에 현재 form에 어떤 input이 어디에 있는지 등에 대한 정보를 알려준다.

<Input
	required
    {...register("username")} // 이런 너낌
    placeholder="Username"
/>

 

원래 register의 내용은 name, onBlur, onChange, ref 이다.

register object의 property들을 추가하기 위해 '...' 연산자를 이용해 prop으로 넣는 것이다.

<Input
	required
    name="name" //
    onBlur={onBlur} //
    onChange={onChange} //
    placeholder="Username"
/>

원래는 이런 느낌

---

watch 함수 사용하기

watch를 이용해 등록(register)한 object(등록한 Input)에 접근할 수 있다.

const {register, watch} = useForm();

 

console.log(watch());

watch함수를 콘솔창에 띄워보면 입력(input)한 객체의 정보를 볼 수 있다.

 

 

---

handleSubmit 함수 사용하기

handleSubmit은 data를 검증(validate)해주는 함수이다.

기본적으로 event.preventDefault() 를 호출해주기 때문에 form을 사용할 때마다 일일이 호출해주지 않아도 된다.

const {register, handleSubmit} = useForm();

onSubmit 함수를 생성한다. 

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

 

form에 onSubmit 속성으로 handleSubmit과 함께 onSubmit함수를 호출한다.

<ModalBody as="form" onSubmit={handleSubmit(onSubmit)}>
//... 중략
</ModalBody>

이 프로젝트에서는 ChakraUI를 사용하고 있기 때문에 ModalBody를 Form으로 사용하고 있다.

onSubmit 이벤트를 위와 같이 설정해주게 되면 handleSubmit 함수가 onSubmit을 안고 실행하면서 유효성 검증(validation)과 preventDefault()까지 호출해준다.

 

 

 

Home