TIL 24.01.10 React-hook-form value 객체

문제점

 

프로젝트 진행 중에 react-hook-form 을 쓰게 될 일이 있어서 사용했다.

특수하게 api 를 받아와서 결과 값을 도출하는 로직이어서 react-hook-form 에서 제공하는 data 를 바로 body로 넘기는 코드를 작성했다.

 

그런데 객체로 값을 넘겨줄때, 아래처럼 v.value 가 객체면 react-hook-form 에서 정한 value type에 어긋나기 때문에,

그 객체 자체를 전달해줄 수 없다.

 

따라서 JSON.stringify 로 문자열형태로 전달해주어야함

 

<S.RadioInput
  {...register(`${v.type}`, {
    required: `${v.title} 은 필수 선택 항목입니다.`,
  })}
  type="radio"
  value={JSON.stringify(v.value)}
  id={v.title.replace(/\s+/g, "-").toLowerCase()}
/>;

 

 

그런데 이상태에서 값을 전달하면 api 를 제대로 받아올 수 없기 때문에 수정 해주어야한다.

 

 

시도해본 것

 

다음과 같이 react-hook-form 에서 제공하는 watch 를 사용했는데, 해당하는 register 의 value 를 기억했다가

파싱 이후에 새 "alc" 라는 key 값에 집어넣어서 전달하는것이다.

이러면 전달도 잘되고 기능도 동작하는데 alcohol 이라는 기존의 문자열객체라는 쓸데없는 값이 생성되고, 이 과정을 객체를 포함한 모든 key  value 에 적용해야해서 복잡했다.

const alcoholOption = watch("alcohol");
const alcoholOptionParse = JSON.parse(alcoholOption);
setValue("alc", alcoholOptionParse);

 

해결방안

 

다음처럼 onSubmit 으로 데이터를 body에 넘겨 전달할때 객체인 데이터가 있으면 파싱하고 그게 아니라면 원래값을 리턴하는 로직을 짜서 해결했다. 이렇게 하면 문자열객체값이 제대로 객체형태로 body 로 전송되고 결과가 잘 나온다.

 

const onSubmit = async (data: any) => {
    const parsedData: { [key: string]: any } = {};

    Object.keys(data).map((key) => {
      try {
        parsedData[key] = JSON.parse(data[key] as string);
      } catch (error) {
        parsedData[key] = data[key];
      }
    });

    const response = await getCancerPrediction(parsedData);

    setData(response);
  };

 

 

알게된 것

 

코드를 짜다보면.. 비효율적인걸 알면서도 왠지모르게 그렇게 짤 때가 있다.. 그러지말고 방법을 계속 찾아보도록하자.

react-hook-form 을 이번기회에 처음 사용해보았는데, 앞으로 폼 데이터를 짤 때 유용하게 사용할 수 있을 것 같다.

유효성 검사할때 매우 간편함