[TIL] react-hook-form 을 이용한 회원가입 유효성검사

React-hook-form을 이용하여 회원가입에 필요한 from들의 유효성 체크를 해보았다.
유효성 검사가 React hook을 사용하는 것 이외에도, yup과 redux를 사용하는 등의 방법이 있다고 하는데
최근에 hook을 사용하는 것이 코드도 간결하고 syntax도 깔끔하고, 속도도 빠르다고 해서 hook을 선택.

처음에는 유튭을 참고해서 구현하려 했는데 유튭은 6v이고, 최근에 7버전이 나와서
공식문서와 스택오버플로우를 요리조리 섞어서 구현하였음.
아직 공식 문서를 제대로 이해하는 것이 쉽지 않아서 조금 더 문서를 읽는 연습을 해야 할 것 같다

---

RedBox : email 이라는 name의 Element를 관찰.
OrangeBox : email element를 관찰하기 위해 input에 register로 등록을 해주어야 함.

유효성 옵션들을 적용하여 어떤 식으로 유효성을 체크할지 조건들을 생각하고 넣어주면 된다.
나는 email 유효성 검사로 한 것을 예로 들면,
필수(required)로 입력해야 하며 이메일 형식(pattern)에 맞게 작성할 수 있도록 정규식을 추가하였음.

// 버전6
ref={register("email", {required: "Required", pattern: /^\S+@\S+$/i})}

// 버전 7
{...register("email", {required: "Required", pattern: /^\S+@\S+$/i})}

GreenBox : email의 input 창에 데이터를 입력하면 이런 식으로 값을 입력할 때마다 업데이트돼서 받아와 짐.

YellowBox : error가 발생했을 경우, 에러 문구를 표시해준다.

---

나머지 name, userId, password도 같은 형식으로 받아와서
클릭 핸들러에 모든 데이터를 data로 받아오고, 서버에 보내준다.

---

※ v6 에서 v7로 변경할 때 참고 : https://stackoverflow.com/questions/66927051/getting-uncaught-typeerror-path-split-is-not-a-function-in-react
※ 참고 : https://react-hook-form.com/
※ 참고 : https://www.youtube.com/watch?v=tWOn7g_3wKU