불친절한 블로그

[React] React-Hook-Form 사용기 본문

Project/BEMS 찍먹

[React] React-Hook-Form 사용기

오누! 2022. 2. 22. 13:55
반응형

자바스크립트를 짤때 form은 항상 사용해왔다.

그러던 어느날 React에 전용 form이 있다는 소식이 들려왔다.

뭐지?

 

구글링 ㄱㄱ

그것은 React-Hook-Form이였다.

공식 홈페이지 까지 있었다.

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

 

Home

React hook for form validation without the hassle

react-hook-form.com

 

오호라 공식홈페이지에서 예제들을 보고 바로 한번 만들어 보았다.

응 설치부터~

$ npm install react-hook-form

 

그럼 이제 import문으로

선언하자.

 

그리고 공식홈페이지 예제를 보고 간단하게 슥삭!

요녀석인데

아주 기본적인 것만 넣은 상태이다.

React를 잘 모르는 나로써는 중간에 {...register("이름")} 이부분을 이해하기 힘들었다.

{...register("이름")}를 하면 form을 submit 했을때,

form으로 던질 key가 던져졌다.

value에 값을 넣어 submit하면 console에 form의 내용들이 전달되는 것을 확인할 수 있다.

submit을 사용하기 위해서는

handleSubmit을 사용하면 되는데, 사용방법은

useForm 선언할때, handleSubmit을 넣어주고,

form 태그에 onSubit 속성을 넣고 아래 이미지처럼 해주면 된다.

 

반응형
Comments