오늘은 마이페이지의 비밀번호 변경 시 뜨는 모달 창의 벨리데이션을 적용할 때 리액트 훅 폼을 공부해서 사용해봤다.

---

React-hook-form 로그인폼 사용

1. useform imfort

2. React-hook-form 에서 값 꺼내기

register

: input에서 값을 불러오기 위한 함수
: 다른 옵션을 이용하면 input의 유효성 검사도 쉽게 할 수 있다.
: register를 input에 넣어서 react-hook-form을 활성화한다.

handleSubmit

: React Hook Form에서 Submit을 관리하기 위해 만든 함수
: 함수를 인자로 받으며 그 함수에 data라는 인자를 넘겨준다.
: preventDefault()를 포함하여 form을 submit한다.
: 유효성 감사가 완료되었을 때 폼 데이터를 전달한다.

formState errors

: formState - form 상태에 대한 정보를 포함한다.
: 해당 form에 에러가 있으면 표시 할 수 있도록 할 수 있다.
: console.log(formState.errors)로 에러 핸들링과 에러 팔로우가 손쉽게 가능하다.

setError

: setError 는 발생하는 문제에 따라 추가적으로 에러를 설정할 수 있게 도와준다.
: 해당 Error 를 활용하여 handleSubmit 을 컨트롤하면 비밀번호와 비밀번호 확인 Input 을 비교하거나, 서버 Error 등 추가적으로 Error 를 설정할 수 있다.
: setError()의 마지막 객체로 {shouldFocus: true}객체를 보내주면
에러가 발생한 위치로 커서가 자동으로 이동 된다.

: 한 개 또는 그 이상의 입력값 에러를 수동으로 설정할 수 있다.
: input과 관련된 에러인 경우 유효성 검사를 통과하면 에러 값을 유지하지 않는다.
: handleSubmit 안에서 비동기적으로 유효성 검사를 수행한 뒤 사용자에게 에러 피드백을 제공할 때 유용하다.

watch

: 지정된 input 을 관찰하고 그 값들을 반환한다.
: 렌더링 할 대상을 결정할 때 유용하다.
: console.log(watch())를 이용해 데이터를 팔로우하여 손쉽게 확인 가능하다.

3. input, span 태그에 register, error 적용

• form 을 전체 input 과 button을 감싸게 설정한다.
• form 구문에 onSubmit ={ handleSubmit } 을 넣는다.
• id 값을 준다.
• { ... register ( " id 값 ", { pattern : { value : 벨리데이션 값, message : "오류 메시지" }, } ) } 기입
• input 밑에 에러 메시지를 출력해주는 span 태그를 적용한다.

4. 추가 에러 설정 및 데이터 서버에 넘기기

• React-hook-form 에서 선언했던 setError 사용해서 if문 만들기

• { shouldFocus : true }

  • error 발생시 그 input 값으로 focus 줌

• else

  • 제대로 다 작성했을 때 실행
  • API 명세서에서 적혀진대로 data 값 넣기
  • modifyPassword 에게 newData 값 보내주기

  

• modifyPassword

  • React Query 의 useMutation 사용
  • async 로 newData 받아오기
  • 비밀번호를 성공적으로 변경했을 시
    • localStorage 의 accessToken, refreshTocken 삭제
    • login 페이지로 이동

5. input 값이 다 채워졌을 때 변경 버튼 활성화

• useState 로 getter, setter 설정
• watch 함수 설정
• useEffect 로 input 값이 다 채워졌을 때 if 문으로 setter 값 설정

6. input 값 있을시 x button 활성화

Nullish 병합 연산자(??)

: 최근 JavaScript 문법
: 왼쪽 피연산자가 null 이면 오른쪽 피연산자를 undefined반환하고
: 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자
: || 으로 대체 가능하지만 한계점이 있음

Nullish 참고 문헌

• watch("password") 의 길이가 null 이면 undefined를 반환하고,
  null이 아니면 왼쪽 피연산자를 반환한다.

• input 속성에 onChange 함수를 넣는다.

  • onChange={ e => checkExistPwd(e) }

  

• 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)
    }

    • 둘 다 적용 가능하다 !