많은 반복 작업에 여전히 어려운것도 있지만 이제는 몸이 귀찮아지는 작업들이 있다.
그럴때 폼 라이브러리를 사용 하면 쉽고 깔끔하고 짧은 코드로 작성 가능하다는 충격적인 얘기를 들었다...
라이브러리에 중복 작성 하는 컴포넌트 과정이 많아서 굳이 우리가 하지 않아도
폼 라이브러리를 사용 하면 쉽고 깔끔하고 짧은 코드로 작성 가능하다.!
React-from
▼
Redux-from
▼
Formik
▼
React-hook-form (최근에 가장 많이 쓰임)
기존 방식
게시판이던 로그인 창이던 이런 작업들은 늘 반복되는 작업을 해줘야한다.
라이브폼을 사용 한 방식
-Register -> 객체
해당하는 필드 이름을 넣고
버튼 같은 경우 type 을 'submit'으로 설정 후
Form 안에 전체를 감싸고
Form 감싼 부분은
onSubmit={ handleSubmit} 이 onSubmit 함수에 데이터 전송 된다.
제공되는 함수
⭐️ Register (onChange 역할)
⭐️ HandelSubmit (data로 저장해서 넘겨주는 역할)
⭐️ 신경 써야하는 부분은 onSubmit에 들어가야 할 부분!
[yup](https://www.npmjs.com/package/yup)
정규 표현식으로 복잡하게 사용했던 부분을 라이브러리로 끝!
또한 yup안에서 정규 표현식 세부사항을 조절 할 수 있다
(yup)정규식 표현이 담긴 상수를
yupResolver 를 이용해
useForm 에 넣어 준다.
스타일을 쉽게 변경 해주기 위해 공통 컴포넌트 스토리북으로 관리한다. ( 디자이너와 함께 일 할때)
이번 달도 빠르게 지나치는 느낌이다.
내가 놓치고 가는건 없는지 내가 그냥 외워서 사용하는지 정말 잘 이해했는지 늘 의문 ㅜ 그래서..
이번 주말에 밤잠 설치며 작업을 하자!