71. 폼 라이브러리

이름이 왜 폼?

formik

함수형이 나오면서 생긴
React-hook-form

제어 컴포넌트 = redux-form, formik… = 입력할 때마다 state가 바뀌는 형태
비제어 컴포넌트 = react-hook-form =입력할 때마다 state가 바뀌지 않는 형태 = 성능이 빠르다

안녕하세요
안, 안녕 까지만 입력을 해도 state에 저장이 된다
isActive같이 버튼 색을 변경하는 것 = 제어 컴포넌트가 들어간다
텍스트가 많은 데이터는 성능이 많을 수 있기 때문에 = 비제어 컴포넌트를 사용한다

처음에 공부할 것들

yarn add react-hook-form

form안에 버튼의 주의사항

타입을 reset으로 하면 form안에 있는 것이 초기화된다
state가 지워지지는 않는다

타입을 submit으로 하면  네모친 곳에 있는게 submit을 통해 날라간다

 

나만의 버튼기능을 만들려면?

타입을 button으로 한다

 

버튼에 onCkick~을 적어도 form에 있는 onSubmit이 실행된다
디폴트(기본값) submit

나만의 버튼을 사용하려면 type=“button”을 적는다

저장이 되게 하는 것 = handleSubmit

register에 적은 것이 handleSubmit을 통해 onClickSubmit에 보내준다

비교

이름을 바꾸거나 추가할 때는

한 줄만 추가하면 된다
앞으로 왼쪽보다는 오른쪽처럼 코딩을 한다