행마다 submit 시 react-hook-form의 폼검증이 실행되도록 할수 있는 방법

Question

리액트 학습 후 토이 프로젝트로 날짜마다 일정을 등록하는 app을 만들고 있습니다.날짜마다 즉 row 입력하는 input이 13개이며 한달의 일정을 등록해야 하기 때문에꽤 많은 input을 검증하기 위해react-hook-form 라이브러리 사용하고 있습니다.구현하려는 기능 행의 어느 input에서 엔터를 입력하면 해당 행의 데이터를 submit 하려고 합니다.현재 상황은 엔터를 입력 시 submit하면 row데이터가 전송되는 것이 아닌 폼 전체 데이터가 전송됩니다.다른 방식으로 해보고자 formData를 만들어 row를 submit하면 formData를 row데이터로 업데이트하는 방식으로 시도 해보았는데 row데이터만 정상적으로 업데이트는 되지만 정작 react-hook-form의 폼검증이 실행되지 않습니다.다른 방법으론 List컴포넌트마다 으로 감싸려고 했지만 table밑에 form을 그릴수 없다는 오류가 발생하여 시도조차 하지 못했습니다.구글링도해보고 공식문서를 찾아보고 해보았지만 비슷한것 자료를 찾지못해 글을 올리게 되었습니다.어떤방식을 사용해야 특정row만 submit하면서 react-hook-form의 폼검증까지 거칠수 있을까요?선배님들의 가르침 부탁드립니다.main.jsx const onSubmit = (data) => { console.log(data); }; return (

kiroki · Accepted Answer

노가다지만 제일 쉬운 방법으로는table 태그를 사용하지 않고 div등의 다른 태그로 목록을 구현하는 방법이 있습니다ux적인 관점에서는 하나의 날짜를 선택시에 하나의 form을 입력할 수 있게 구성하는 방법도 추천드립니다

행마다 submit 시 react-hook-form의 폼검증이 실행되도록 할수 있는 방법

1개의 답변

Q&A 목록