Form 매니징 : React-Hook-Form

목적

• React Hook Form 을 사용한 Form 비즈니스 로직 구현

• yup로 form validation 로직을 간소화

• Form 로직에서의 유효성 검사 경험

• Form 상태에 따른 UI 스타일링 경험

---

해야 할 일

1. Submit 버튼클릭시, 유효성 검사

   1. React-Hook-Form 과 Yup 연동해서 사용해보기

2. 유효성 검사 세부사항

   1. 조건 (localhost:4000/api-docs 의 User Schema 참고)

      1. 이름: 최소길이 2, 최대길이 8

      2. 닉네임: 최소길이 2, 최대길이 8

      3. 핸드폰 번호: format: "/^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/"

      4. 이메일: format: "[e-mail]"

      5. 에러 메시지

         1. 최소 길이는 0 자 입니다. || 최대 길이는 0자 입니다.

   2. UI (올바르지 않은 값 일 때)

      1. border 색상 red 색상으로 변경

      2. 하단에 에러메시지 출력 (color: red, textStyle: sm)

---

Refernce

공식 문서

• React-hook-form

• yup

Tok Tip

• hook form tip