react-hook-form를 사용하여 똑같은 값을 가지는 radio 버튼 클릭 시 해제 되는 기능 구현 방법

Question

react-hook-form을 사용하여 form을 구성하였습니다.input radio에서 더블클릭 시 체크를 해제하는 기능을 구현하려고 하는데공식문서를 보고 있지만 어디서부터 시작해야할지 감이 안잡히네요혹시 위에 말한 기능 구현해보신 선배님들이 계시다면참고할만한 자료나 키워드를 알려주실수 있을까요?

풍월상신(가니메디안) · Accepted Answer

radio 자체에는 doubleClick 이벤트가 없습니다.radio 대신 label 에 onDoubleClick 이벤트를 바인딩해주는 방법이 있는데요...RHF 열공중이신 듯 해서, 도움이 될만한 예제코드로 샌드박스를 만들어 봤습니다.레이블 더블클릭에 radio 를 해제하는 코드로 시작했는데.....하다보니 이벤트 전파 문제가 있어서, 더블클릭 이벤트 바인딩으로는 해결이 안되더군요.레이블 클릭시 라디오 선택이 토글되는 방법이 지금은 최선인 것 같습니다.https://codesandbox.io/p/sandbox/react-hook-form-radio-lqndkw?file=%2Fsrc%2FApp.tsx폼 입력 값의 밸리데이션과 에러가 처리되고 피드백 되는 부분이 RHF 에서 가장 중요한 영역이라고 생각해요.RHF + Zod + Resolver 가 실무에서 어떤 방식으로 사용되는지 감을 잡으실 수 있으면 좋겠습니다.도움이 되었길 바랍니다.

세브라이드 · Answer

inputRadio.ondblclick = () => { inputRadio.checked = false; };리액트 코드로 잘 바꾸시면...?

풍월상신(가니메디안) · Answer

도움이 되었다니 저도 기쁘군요.RHF 의 resolver 는, 외부 유효성 검증 라이브러리(Yup, Zod, Joi 등등) 의 유효성 검증 결과를 Promise.resolve 로 받아서 처리하는 RHF 의 펑션.. 정도로 저는 이해하고 있습니다.{ resolver: zodResolver(weatherSchema) }이 코드는, Zod 의 유효성 검증 스키마 weatherSchema 로, 현재 폼의 유효성을 검증하고, 그 결과 프라미스를 받아서 처리하게 되는 것이죠.Yup 은 어떻게 쓰는지 모르지만,{ resolver: yupResolver(weatherSchema) }아마도 이런 식으로 수용하는 미들웨어가 resolver 인 것 같습니다.펑션 이름은 resolver 이지만, 그 리턴 객체에는 모든 에러 상태와 객체가 포함되어 있기 때문에, 에러 핸들링을 formstate 로 넘겨는 것 같습니다.    formState: { errors },이 코드로 formstate 중 errors 를 꺼내와서 사용할 수 있는데, errors 에는 각 폼 요소의 오류 객체가 포함되고, errors.inputField.message 에는 Zod 스키마에서 지정해둔 에러 메세지가 담기게 되죠. 그리고 이를 활용해서 에러 메세지를 노출시키거나 진행을 바꾸는 등의 작업을 할 수 있습니다.하지만 이 방식의 문제는, resolver 이기 때문에, resolve 온리 이기 때문에, submit 이후의 디버깅에 공백이 발생한다는 점이에요.errors 객체가 제공되고 있기는 하지만, resolver 의 전체적인 작동원리를 이해하지 못하는 동안에는 디버깅이 난감해집니다.* RHF 의 공식문서에 조그맣게 resolver 에 대한 안내가 있긴 하네요.https://react-hook-form.com/docs/useform#resolver

react-hook-form를 사용하여 똑같은 값을 가지는 radio 버튼 클릭 시 해제 되는 기능 구현 방법

3개의 답변

Q&A 목록