react-hook-form 사용 시 set함수를 사용하여 리랜더링 된 이후 값과 화면에 출력되는 모습이 다른원인

Question

우선 문제점은제가 하려는 기능은 특정행에서 +을 클릭하면 클릭한 행 밑으로 똑같은 form이 생성하는것입니다.react-hook-form를 사용하여 form을 구성하면 버튼 클릭 후 set함수 사용하여 리랜더링 화면에 출력되는 값이 console에 찍힌 값, 콘솔요소 태그에 출력되는 값과 다르게 표시는 되는 문제입니다.react-hook-form을 사용하지 않고 순수하게 코드를 작성하면 정상적으로 잘 됩니다.https://jungsury.github.io/react-hook-form-test/테스트 해보시면 감사하겠습니다. 콘솔창에 상태값도 찍히도록 하였습니다.App.jsx import { useState } from "react"; import PrintList from "./printList"; const App = () => { const list = [ { no: 1, content: "test1" }, { no: 2, content: "test1" }, { no: 3, content: "test1" }, { no: 4, content: "test1" }, { no: 5, content: "test1" }, { no: 6, content: "test1" }, { no: 7, content: "test1" }, { no: 8, content: "test1" }, { no: 9, content: "test1" }, { no: 10, content: "test1" }, { no: 11, content: "test1" }, { no: 12, content: "test1" }, { no: 13, content: "test1" }, { no: 14, content: "test1" }, { no: 15, content: "test1" }, { no: 16, content: "test1" }, { no: 17, content: "test1" }, { no: 18, content: "test1" }, { no: 19, content: "test1" }, { no: 20, content: "test1" }, ]; const [tmpdata, setTmpData] = useState(list); const plus = (e, index, list) => { e.preventDefault(); console.log(index); const newItem = { no: list.no,//클릭한 input의 no값이 들어갑니다. content: "", }; const newItems = [...tmpdata]; newItems.splice(index + 1, 0, newItem);//클릭한 행 다음으로 위치 setTmpData(newItems); }; const onSubmit = (data) => { console.log(data); }; return tmpdata.map((data, index) => ( )); }; PrintList.jsx import { useForm } from "react-hook-form"; const PrintList = ({ day, index, plus, onSubmit }) => { const { register, handleSubmit } = useForm(); const callSubmit = () => { handleSubmit(onSubmit)(); }; console.log(day); return ( ); };

프로폴리스 · Accepted Answer

저번과 같은 질문을 올리셨네요..대입하는 list.no 값을 index로 바꾸시믄 되겄네요.

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

1. 이 태스크는 RHF 에 어울리지 않습니다.2. 이 태스크의 결과물은, Data 리스트에 new Data 항목을 추가하는 것일 뿐인데 반해, RHF 는 폼의 밸리데이션과 에러핸들링에 관심을 두고 있습니다.3. 20개 이상의 RHF 인스턴스를 허용하는 것은 in most cases, 필요하지 않습니다.4. RHF 의 활용이 필요하다면, Form 컴포넌트를 분리해서 단일 Form 컴포턴트에서 RHF 을 활성화 해주는 것이 바람직해 보입니다. 5. dataEntry 추가는 setState 커스텀 훅 만으로도 충분해 보입니다.RHF 에 관한 심화학습이 필요했던 것이었다면,Zod &#43; Resolver 를 알아보시는 쪽이 효율적일 것 같습니다.

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

4. RHF 의 활용이 필요하다면, Form 컴포넌트를 분리해서 단일 Form 컴포턴트에서 RHF 을 활성화 해주는 것이 바람직해 보입니다.라고 말씀드린 의미는,PrintList 컴포넌트에서 Form 코드를 제거하고, return ( )이렇게 리팩토링 하는게 좋을 것 같다는 의견이었습니다.PrintList 컴포넌트에서는 data[array].map 으로 데이터 출력만을 담당해주고,AddNewDataForm 컴포넌트에서는 입력 폼 밸리데이팅과 에러 핸들링을 담당해줍니다.state 가 컴포넌트 들에 복잡하게 연관-drilling 될 수도 있지만, 이는 리액트에서 일반적인 상황입니다.useContext 로 일단 필요한 state 를 글로벌화 하시고 작업이나 학습을 진행하시다가 Recoil, Zustand 등으로 넘어가시면 될 것 같습니다.걱정하시는 리렌더링은, useContext 만으로도 충분히 최소화 될 수 있는 구조라고 보여지고,제안드린 구조로 RHF 의 장점과 잇점을 최대화 할 수 있을 것 같습니다.

react-hook-form 사용 시 set함수를 사용하여 리랜더링 된 이후 값과 화면에 출력되는 모습이 다른원인

3개의 답변

#react-hook-form 목록