Day-32

많은 반복 작업에 여전히 어려운것도 있지만 이제는 몸이 귀찮아지는 작업들이 있다.
그럴때 폼 라이브러리를 사용 하면 쉽고 깔끔하고 짧은 코드로 작성 가능하다는 충격적인 얘기를 들었다...

1. 폼 라이브러리

2. 검증 라이브러리

3. 공통 컴포넌트

1. 폼 라이브러리

폼 라이브러리를 사용하는 이유 ?

라이브러리에 중복 작성 하는 컴포넌트 과정이 많아서 굳이 우리가 하지 않아도
폼 라이브러리를 사용 하면 쉽고 깔끔하고 짧은 코드로 작성 가능하다.!

폼 라이브러리 변천사

React-from

Redux-from

Formik

React-hook-form (최근에 가장 많이 쓰임)

▶︎ 실습

기존 방식
게시판이던 로그인 창이던 이런 작업들은 늘 반복되는 작업을 해줘야한다.

라이브폼을 사용 한 방식

  • Usequery 하듯이 불러 오면된다.

  • 연결 시킨 것

-Register -> 객체
해당하는 필드 이름을 넣고

버튼 같은 경우 type 을 'submit'으로 설정 후
Form 안에 전체를 감싸고
Form 감싼 부분은
onSubmit={ handleSubmit} 이 onSubmit 함수에 데이터 전송 된다.
제공되는 함수

⭐️ Register (onChange 역할)
⭐️ HandelSubmit (data로 저장해서 넘겨주는 역할)
⭐️ 신경 써야하는 부분은 onSubmit에 들어가야 할 부분!

2. 검증 라이브러리

검증 라이브러리?

[yup](https://www.npmjs.com/package/yup)
정규 표현식으로 복잡하게 사용했던 부분을 라이브러리로 끝!
또한 yup안에서 정규 표현식 세부사항을 조절 할 수 있다

▶︎ 실습

(yup)정규식 표현이 담긴 상수를
yupResolver 를 이용해
useForm 에 넣어 준다.

  • 원하는 메세지를 입력 하고 싶을때

3. 공통 컴포넌트

공통 컴포넌트?

스타일을 쉽게 변경 해주기 위해 공통 컴포넌트 스토리북으로 관리한다. ( 디자이너와 함께 일 할때)

▶︎ 실습

  • 버튼 폴더, 파일을 새로 만들어주고
  • 버튼의 스타일까지 여기 만들어준다.

  • 콘테이너에 버튼파일을 불러와서 기존 버튼 대신 사용

  • 기존에 있던 타입, 스테이트 등을 넘겨준다.


⭐️ 부모에서 데이터를 하나하나 다 내려줘야 한다는 점 !

끝으로

이번 달도 빠르게 지나치는 느낌이다.
내가 놓치고 가는건 없는지 내가 그냥 외워서 사용하는지 정말 잘 이해했는지 늘 의문 ㅜ 그래서..
이번 주말에 밤잠 설치며 작업을 하자!

0개의 댓글