[TIL] react-hook-form mode

💡 TIL 20230830 - react-hook-form mode

---

mode란?

mode란 React-hook-form의 useForm의 props 중 하나로, 사용자가 submit을 하기 전에 유효성 검사를 진행하는 것이다. (validation strategy before submitting behaviour)

 

mode 옵션을 사용하면 사용자가 양식을 제출하기 전에 유효성 검사 전략을 구성할 수 있다. 유효성 검사는 handlesubmit 함수를 호출하여 트리거되는 onSubmit 이벤트 중에 발생한다.

 

1) onSubmit

유효성 검사는 제출 이벤트에서 트리거되며, 유효하지 않은 입력은 onChange 이벤트 리스너에 연결하여 유효성을 재확인한다.

 

2) onBlur

블러 이벤트에서 유효성 검사가 트리거되는데, 블러 이벤트는 사용자의 focus가 다른 곳으로 이동했을 때 이벤트를 의미한다.

 

3) onChange

input value가 change될 때마다 유효성 검사가 트리거되므로 렌더링이 여러 번 다시 수행된다. 따라서 onChange의 경우 성능에 영향을 미치는 경우가 많으므로 사용에 주의가 필요하다.

 

4) onTouched

유효성 검사는 처음에 첫 번째 blur 이벤트에서 트리거됩니다. 그 이후에는 모든 change 이벤트에서 트리거된다.

 

5) all

유효성 검사는 blur 및 change 이벤트 모두에서 트리거된다. 이 경우도 input value가 change 될 때마다 유효성 검사를 수행하므로 성능에 영향을 미친다는 점에 주의가 필요하다.