React Hook Form

React Hook Form

리액트에서 form 으로 작업하기에 가장 편리한 라이브러리다.

기존 react에서 input등 form 안에 들어있는 요소들에 대한 관리를 할때 각각의 요소에 useState를 사용해서 관리를 해왔다.
이렇게 하게 되면 관리할 state들도 많아지고 복잡해지기에 form 라이브러리를 사용하게 되면 간단하고 간편하게 사용할 수 있다.

기존코드

const function(){
	const [name,setName] = useState("");
  	const [password,setPassword] = useState("");
  	const [email,setEmail] = useState("");
  	const [error,setError] = useState("");

  	const onChange = (e : React.FormEvent<HTMLInputElement>) => {
    	const {currentTarget:{name, value}} = e;
      	if(name === "name"){
        		setName(value)
           }
      	setError("");
      	
    }
    
    const onSubmit = (e : React.FormEvent<HTMLFormElement>) => {
    	e?.preventDefault();
      	console.log(name);
      	if(name.length < 1){
           	setError("이름을 입력하세요")
           }
    }
    
    return(
      <>
      	<form>
      		<input 
      		onChange={onChange}
			value={name} 
			/>
      		{error !== "" ? error : null}
      	</form>
      </>
    )
}

form 라이브러리 사용한 코드

useForm 의 register함수를 사용하면 onChange이벤트 핸들러와 input의 props가 필요없다. (useState도 필요 없음)

console.log(register("name")) 을 하면 onChange, onBlur 이벤트 등을 return 하고 있고 register함수안에 문자열을 적어야 name에 그 문자가 할당된다.

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

const function(){
	const {register,watch} = useForm();
  	console.log(register("name"))
     return(
      <>
      	<form>
      		<input 
       		{...register("name")} //register함수가 객체를 return하니  props에 스프레드 문법으로 넣어준다.
			/>
      	</form>
      </>
    )
}

console.log(watch()) 를 해보면 name을 키값으로, input의 value 값을 가지고 있는 객체를 리턴한다.

하나의 객체 안에 form을 만들고 여러개의 input이 있을때 useForm을 사용해서 하나로 연결된 객체를 확인할 수 있다.

참고