오늘은 마이페이지의 비밀번호 변경 시 뜨는 모달 창의 벨리데이션을 적용할 때 리액트 훅 폼을 공부해서 사용해봤다.
: input에서 값을 불러오기 위한 함수
: 다른 옵션을 이용하면 input의 유효성 검사도 쉽게 할 수 있다.
: register를 input에 넣어서 react-hook-form을 활성화한다.
: React Hook Form에서 Submit을 관리하기 위해 만든 함수
: 함수를 인자로 받으며 그 함수에 data라는 인자를 넘겨준다.
: preventDefault()를 포함하여 form을 submit한다.
: 유효성 감사가 완료되었을 때 폼 데이터를 전달한다.
: formState - form 상태에 대한 정보를 포함한다.
: 해당 form에 에러가 있으면 표시 할 수 있도록 할 수 있다.
: console.log(formState.errors)로 에러 핸들링과 에러 팔로우가 손쉽게 가능하다.
: setError 는 발생하는 문제에 따라 추가적으로 에러를 설정할 수 있게 도와준다.
: 해당 Error 를 활용하여 handleSubmit 을 컨트롤하면 비밀번호와 비밀번호 확인 Input 을 비교하거나, 서버 Error 등 추가적으로 Error 를 설정할 수 있다.
: setError()의 마지막 객체로 {shouldFocus: true}객체를 보내주면
에러가 발생한 위치로 커서가 자동으로 이동 된다.
: 한 개 또는 그 이상의 입력값 에러를 수동으로 설정할 수 있다.
: input과 관련된 에러인 경우 유효성 검사를 통과하면 에러 값을 유지하지 않는다.
: handleSubmit 안에서 비동기적으로 유효성 검사를 수행한 뒤 사용자에게 에러 피드백을 제공할 때 유용하다.
: 지정된 input 을 관찰하고 그 값들을 반환한다.
: 렌더링 할 대상을 결정할 때 유용하다.
: console.log(watch())를 이용해 데이터를 팔로우하여 손쉽게 확인 가능하다.
React-hook-form 에서 선언했던 setError 사용해서 if문 만들기
{ shouldFocus : true }
else
modifyPassword
: 최근 JavaScript 문법
: 왼쪽 피연산자가 null 이면 오른쪽 피연산자를 undefined반환하고
: 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자
: || 으로 대체 가능하지만 한계점이 있음
input 속성에 onChange 함수를 넣는다.
onChange 시 발동되는 함수를 만든다.
input 의 길이가 0 보다 클 경우, setExistPwdLen(true) 가 true, 아니면 false 가 되게 설정
e.target.value.length > 0 ? setExistPwdLen(true) : setExistPwdLen(false)
if (watch.password.length > 0){
setExistPwdLen(true)
} else {
setExistPwdLen(false)
}