[리팩토링] React-Hook-Form 도입

리액트 훅 폼을 사용하기 전 폼을 제출하기 위해서는 수많은 State와 Onchange 작성이 필요했다. 

  const [plantNickname, setPlantNickname] = useState<string>(
    nicknameFromDetail || nicknameFromList,
  );
  const [plantName, setPlantName] = useState<string>(
    plantNameFromDetail || plantNameFromList,
  );
  const [purchasedDay, setPurchasedDay] = useState<string>(
    secondsToDate(
      purchasedDayFromDetail?.seconds || purchasedDayFromList?.seconds,
    ),
  );
  const [wateredDay, setWateredDay] = useState<string>(
    secondsToDate(wateredDayFromDetail?.seconds || wateredDayFromList?.seconds),
  );
  const [frequency, setFrequency] = useState<number>(
    frequencyFromDetail || frequencyFromList,
  );

  const [imgUrl, setImgUrl] = useState<string>(
    imgUrlFromDetail || imgUrlFromList,
  );
  const [previewImg, setPreviewImg] = useState<string>();

  const handlePlantNickname = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPlantNickname(e.target.value);
  };
  const purchasedDayHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPurchasedDay(e.target.value);
  };
  const wateredDaysHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setWateredDay(e.target.value);
  };

  const handleFrequency = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFrequency(Number(e.target.value));
  };

이런 코드를 줄이고 성능 개선을 이뤄낼 수 있는 react hook form을 적용하기로 했다. 사실 이미 register페이지는 적용했고 edit 페이지를 적용해야했다.

코드를 정리하고 나니 onValid 함수로 모든 것이 처리 되었다. 다만 다시 코드를 짜면서 마지막 물 준 날에 대해서 케이스를 나누는 것이 오래걸렸다. 배열인데 값이 또 필수는 아니라서 애초에 없을 수도 있고 수정안 할 수도 있어서 생각이 필요했는데 일단 조건을 다 적어두고 라이브러리 적용만 시켰다. 꽤나 많은 코드가 제거 되었다.

 

  const onValid = async (data: UserPlantForm) => {
    setSaving(true);

    let modifiedWateredDays: InstanceType<typeof Timestamp>[] = [];

    if (data.wateredDays) {
      if (wateredDayFromDetail || wateredDayFromList) {
        modifiedWateredDays = wateredDayFromDetail
          ? [...wateredDayFromDetail]
          : [...wateredDayFromList];
        if (modifiedWateredDays.length > 0) {
          modifiedWateredDays[modifiedWateredDays.length - 1] = dateToTimestamp(
            data.wateredDays,
          );
        } else if (modifiedWateredDays.length == 0) {
          modifiedWateredDays.push(dateToTimestamp(data.wateredDays));
        }
      }
    } else {
      modifiedWateredDays = wateredDayFromDetail
        ? [...wateredDayFromDetail]
        : [...wateredDayFromList];
    }
    const updatedFields = {
      imgUrl: imgUrl,
      nickname: data.nickname,
      purchasedDay: dateToTimestamp(data.purchasedDay),
      wateredDays: modifiedWateredDays,
      frequency: data.frequency,
    };
    if (!docId) return;
    updatePlantData(docId, updatedFields);
    navigate('/myplant');
  };