230816 typescript react-hook-form 라이브러리 사용해보기

상태관리 hook : recoil 라이브러리 사용하여 상태관리 해보기.

 

*recoil 라이브러리 : 리액트 상태관리 라이브러리

 Atom: recoil 라이브러리에서 Props 객체 데이터값 보관하는 장소

useRecoilValue( ) : Atom이라는 공간에서 데이터 값을 받아오기 위해 사용하는 함수

useRecoilState( ) : Atom 이라는 공간에서 데이터 값을 받아온 후 변경까지 할 수 있는 함수

 

*recoil 을 사용하기 앞서 react-hook-form 라이브러리 사용해보기 (https://www.react-hook-form.com/get-started)

-컴포넌트 안에 반복적으로 사용되는 useState( ) 를 간소화 할 수 있는 라이브러리.

useForm ( ) 

- 타입정의 : register 함수를 통해 생성되는 프로퍼티 값의 타입을 객체형식으로 정의(interface 타입정의)

-register 함수 : 별도의 이벤트 핸들러를 사용하지 않아도, 이벤트 발생여부를 확인 가능

-watch 함수 : form 태그안에 입력된 값의 변화를 확인 후 적용해주는 역할

-handleSubmit : onSubmit 핸들러 작동시 실행되는 함수로 콜백함수를 받는다.(*실제 콜백함수에서 실행문 작동)

---

**input 요소가 많을때 빛을 발휘함.

---

***유효성 검사도 가능. 

required, minLength

.*정규식 표현법 검사( https://regex101.com/)