[React] react-hook-form의 setFocus, reset 활용하기

react-hook-form을 사용하여 validation을 구현하던 중에 error를 경고창으로 처리할 경우, input에 포커스되면서 입력창이 초기화되는 형태로 구현하기 위해 찾다가 setFocus와 reset을 발견했다.

처음에는 shouldFocusError를 사용해보려고 했지만 ref를 사용해서 나중에 input을 customInput으로 뺀 후에 forwardRef를 통해 쉽게 ref를 처리하는 형태로 사용해보려고 한다...

 

react-hook-form을 사용하는 것이 목적이었기 때문에 일단은 setFocus와 reset을 사용해서 구현했다. 

 

<input
    type="text"
    placeholder='이메일 주소를 입력해주세요' 
    {...register("email", {
      required: {
        value: true,
        message : "이메일을 입력하세요"
      },
      pattern: {
        value: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g,
        message : '올바른 이메일 형식이 아닙니다.'
      }
    })}
/>

이러한 형태의 email을 입력하는 input이 있다.

 

 if (!response.message) {
    // 응답에 성공했을 때
  } else {
    alert(response.message); 
    setFocus("email");
    reset({
      email: ""
    })
  }

 

이미 입력된 이메일인지 확인하는 api로 요청을 보내고 만약 유효한 이메일일 경우 빈 문자열 message로 응답한다. 

만약 message가 존재할 경우, 해당 message를 경고창으로 보여주고, setFocus로 "email"이라는 이름의 input에 focus한 후에 reset으로 빈 문자열을 넣어준다. 

 

그럼 간편하게 포커스 구현 끝!