React-Hook-Form

📌 React-Hook-Form 이란

리액트를 사용하는 프로젝트에서 많은 폼 양식을 사용하게 되는데 이를 더욱 쉽게 관리할 수 있게 도와주는 라이브러리가 React-Hook-Form 이다.

🕹 설치 - yarn add react-hook-form

기존 사용 코드 예시를 보면,

export default function Page(){
  	const [title,setTitle] = useState('')
   	const [contents,setContents] = useState('')
	return(
    	<>
      		제목 : <input type="text" onChange={onChangeTitle} />
        	내용 : <input type="text" onChange={onChangeContents} />
              	<button onClick={onClickButton}>등록</button>
      	</>
    )
}

위와 같이 state 를 사용하여 input 의 값을 전달하고 관리하였다

이를 react-hook-form 을 사용하면,

import {useForm} from 'react-hook-form'
export default function Page(){
  const {register,handleSubmit} = useForm({
  	mode:'onChange'
  })
	return(
    	<>
      	<form onSubmit={handleSubmit(onClickButton)}>
      		제목 : <input type="text" register={...register('title')}/>
        	내용 : <input type="text" register={...register('content')}/>
              	<button type='submit'>등록</button>
	</form>
      	</>
    )
}

로 따로 state 를 사용하지 않고 등록이 가능하다
쉽게 생각해서 register 는 입력값을 담는 통, handleSubmit은 () 내를 실행시키는 기능 이라고 생각하면 이해가 조금 낫다