Skip to main content

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: "xxxx@xxx.xxx"
      5. 에러 메시지
        1. 최소 길이는 0 자 입니다. || 최대 길이는 0자 입니다.
    2. UI (올바르지 않은 값일 때)
      1. border 색상을 red 색상으로 변경
      2. 하단에 에러 메시지 출력 (color: red, textStyle: sm)

Reference​

공식 문서​

Tok Tip​