폼 라이브러리, 검증 라이브러리, 공통 컴포넌트

8/5

폼 라이브러리는 여러 종류가 있다.
react-form, redux-form, formik, react-hook-form 등...
폼 라이브러리란 그동안 스프레드 연산자를 쓰고, onChangeInput, isEvery, state 등을 만들어서
직접 관리했던 폼들을 미리 만들어 놓고, 라이브러리 형태로 제공해 주는 것이 폼 라이브러리.
그 중, 최근에 함수형 컴포넌트에서 가장 많이 사용되는 폼 라이브러리가 바로 react-hook-form

검증 라이브러리 -> 오늘은 yup
yup을 사용하여, 기존의 정규표현식 또는 length를 기준으로 한 최소/최대글자수, 등의 조건을 아주 쉽게 추가할 수 있다.
또한, 검증 라이브러리와 폼 라이브러리는 서로간에 독립적으로 사용될 수 있으므로,
반드시 react-hook-form과 yup을 같이 사용해야만 하는 것은 아니다.
yup은 기존의 formik 등 다른 라이브러리에서도 함께 사용 가능하다.

인풋박스와 버튼 등은 각각의 페이지에서 직접 작성하지 않고, 하나 만들어 놓고 import하여 사용했었다.
이러한 컴포넌트를 공통컴포넌트(Common components)라고 한다.(크몽 스토리북 예시를 기억하자)
이렇게 해서 장점은, 크리스마스처럼 특별한 날, 또는 다른 이유로 인해서 전체적인 화면 분위기를 변경해야 할 때,
common 컴포넌트를 변경함으로써 모든 버튼에 전체 적용이 가능하도록 만들었다.
페이지별로 각각 만들었다면...?! 변경하기도 힘들고, 다시 되돌아오기도 굉장히 힘들어 진다.

어떠한 회사에 가더라도 공통 컴포넌트는 사용하게 된다.

 

폼 라이브러리

 

세월이 지나면서 React-hook-form이 나왔다.

React-hook-form을 사용하면 

use어쩌구, use블라블라 << 이런건 안써도 된다.

 

use어쩌구~ 이런거보다는 react-hook-form을 쓰는게 편하다

useForm을 불러온다

reguster를 적어주고

...register 를 적고

 

괄호 안에 해당되는 것을 적는다. handleSumit

로그인 버튼을 만들고 <form>으로 감싸준다

form안에 넣으면

handleSubmit을 <form> 

이제 <form>안에 있는건 백엔드로 간다

그리고!

onSubmit을 넣는다

6, 7번줄?

원래는

이렇게 만드는데 리액트훅폼에서

오른쪽처럼 하지 않고

아래꺼만 적으면 넘어간다

이렇게도 줄였었지만 더줄인다는 것
variables: {
email: data.email,
password: data.password
}
=== 스프레드 연산자로

container에 옮긴다

yup을 사용한다

 

연결

???? 이게 뭐여.. 내가 원하는 메시지가 아니다

여기에 넣는다!!

 

새 폴더에 옮김

스토리북

 

컴포넌트의 제사용성을 높인다

부모가 주는 것

부모가 하나 하나 내려줘야 한다

 

이메일, 패스워드 둘 다 바뀜

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

★★★★★★★★★★★★★★★중요★★★★★★★★★★★★★★★

 

reset버튼 = 초기화

24-react-hook-form

Form.container.tsx

Form.presenter.tsx

Form.validation.ts

input01.tsx

Button01.tsx

레지스터 = onChange 기능