상태관리 하는 법

답변 확인

작성자

김주하

프로젝트 개발 중에 상태관리를 어떻게 하면 좋을지, 많이 고민이 되었습니다.

위 사진은 응답자가 피어리뷰에 답변하는 페이지입니다.

응답자는 리뷰를 할 대상자를 자유롭게 선택하여 변경할 수 있고, 대상자에 대한 질문들 또한 상단 번호를 클릭하여 순서 제한 없이 자유롭게 이동하여 답변할 수 있게 하려고 합니다. (즉, 대상자 및 질문에 정해진 순서없이 답변할 수 있음.)

useState로 상태를 관리해보니 코드가 너무 방대해지고 복잡해져서, react hook form으로 상태관리도 함께하고 있는 중 입니다만, 대상자와 질문을 자유롭게 이동할 때 어떻게 상태를 관리할지 아직 명확하게 답을 못찾았습니다ㅠㅠ

혹시 멘토님이라면 어떻게 해결하셨을지 궁금합니다!

useContextHookForm

useArrayFields


[{
  fieldName: '1'
  data: FormValues,
}, {
  fieldName: '1'
  data: FormValues,
}, {
  fieldName: '1'
  data: FormValues,
},
]


const { fields }  = useArrayFields();

const renderField = (field) => {
  switch(field.filedName) {
    return <SomeInput {...register('field.${index}" />
  }
}


const Poo = ({ index }) => {
 const { append } = useFieldArray();

 cosnt handleAppend = ({ childIndex, value }) => {
	 const append(`some.${index}.names.${childIndex}.firstName`, value);
};

  <Bar handleAppend={handleAppend} />
}

const Poo = () ⇒ {}