[React] react-hook-form 개념, 장점

안녕하세요.
게시판 프론트엔드를 개발하면서 react-hook-form 이라는 것을 알게되었습니다.
개발하면서 모르는게 있을 때는 항상 찾아보긴 하지만, 시간이 조금만 지나면 명확하게 생각이 안나더라고요. 
그래서 공부할겸 글로 생각 정리를 해두기로 했어요! 
또, 제가 삐약이 시절에 어떤 생각을 하면서 개발했었는지 기록해두면 미래에 재밌을거라고 생각해서요.
react-hook-form 을 발견했을 때는 
코드 발견  ->  <Controller ~~~>  -> 이게 뭐지? 왜 썼지?  ->  그래서 어떻게 쓰지? 이 순서였어요.
그래서 이 순서로 적어보려고 합니다! 

 

✔ 개념

react-hook-form 이란?

form 의 효율적인 validation 이 가능한 리액트 라이브러리

복잡한 form 을 만들 때 간결한 코드 작성에 도움이 된다.

불필요한 리렌더링을  방지한다.
- input에 변화가 있을때 form의 모든 요소가 리렌더링 되지 않고 입력받고 있는 input 요소만 리렌더링한다.

 

제 경우 게시판은 제목, 카테고리, 내용, 파일 데이터를 입력 받을 수 있습니다.

이 때 state 를 사용하여 입력 받을 수 있지만 input 태그마다 state 를 만들어야 하는 번거로움이 있습니다.

그래서 이 부분을 react-hook-form 을 사용하여 개선해보고자 합니다.

 

✔  사용법

const { register, controller, handleSubmit, formState { errors } } = useForm()


<form onSubmit = handleSubmit(onSubmit)}>

<input {...register('username', {
required : '필수 값 입니다.' })} />

<Controller 
control={control} 
name="Info" 
render={({ field: { onChange } }) => ( 
<Checkbox onChange={(data) => onChange(data)} />
)} 
/>

</form>

react hook form 에서 사용 할 method, function 을 먼저 선언해줍니다.

 

register 

form 의 input, select 요소의 값을 전달하고 검증을 해준다.

'username" 은 해당 input 의 고유의 이름이다.

 

Controller

register method로 제어하기 어려운 컴포넌트 또는 외부 라이브러리를 사용하였을 때 

Controller 라는 wrapper 컴포넌트를 사용하면 간단하게 다룰 수 있다.

실제로 보여주는 부분은 render 부분이다.

control : react-hook-form 에 컴포넌트를 전달하기 위한 method 이다.

 

handleSubmit 

validation에 성공한 데이터를 담은 폼을 받아서 onSubmit 함수에게 데이터를 전달한다.

 

✔ 참고

https://react-hook-form.com/api/useform/

useForm

https://tech.inflab.com/202207-rallit-form-refactoring/react-hook-form/

react-hook-form을 선택한 이유와 적용 과정

https://codiving.kr/139?category=467178 

[React] react-hook-form 사용 및 useForm - 1