컴포넌트가 언마운트 될 때 폼 데이터 초기화 되는 문제

[geniee1220]

문제 상황

그룹 모집 페이지에서 여행 일정을 등록하고, 기본 정보를 입력한 뒤 여행 일정을 수정하기 위해 돌아가면

폼 데이터가 초기화되는 문제

문제 원인

기본 정보 등록 컴포넌트가 언마운트되면서, 컴포넌트가 자체적으로 가지고 있던 상태값이 휘발되어서 생긴 문제

문제 해결

기본정보 등록 컴포넌트가 언마운트 될 때 recoil-persist 라이브러리로 로컬스토리지에 폼 값을 저장

기본정보 입력 컴포넌트가 마운트 되면 react-hook-form의 default value로 recoil-persist에서 꺼내온 값을 지정한 뒤 초기화

const {
    register,
    handleSubmit,
    control,
    trigger,
    watch,
    setError,
    formState: { errors, isValid },
  } = useForm({
    mode: 'onBlur',
    defaultValues: {
      ...tempFormData,
    },
  });

새로고침이 되거나, 폼이 제출되면 해당 값을 초기화하기 위해 useEffect와 submitHandler에서 관리

useEffect(() => {
    setTempFormData({});

    return () => {
      const tempFormData = { ...watch() };
      setTempFormData(tempFormData);
    };
  }, []);

날짜 선택은 input 이 아니라 Controller에서 관리해주고 있으므로, Controller에 defaultValue props를 내려서 해결!