Open geniee1220 opened 11 months ago
그룹 모집 페이지에서 여행 일정을 등록하고, 기본 정보를 입력한 뒤 여행 일정을 수정하기 위해 돌아가면
폼 데이터가 초기화되는 문제
기본 정보 등록 컴포넌트가 언마운트되면서, 컴포넌트가 자체적으로 가지고 있던 상태값이 휘발되어서 생긴 문제
기본정보 등록 컴포넌트가 언마운트 될 때 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를 내려서 해결!
문제 상황
그룹 모집 페이지에서 여행 일정을 등록하고, 기본 정보를 입력한 뒤 여행 일정을 수정하기 위해 돌아가면
폼 데이터가 초기화되는 문제
문제 원인
기본 정보 등록 컴포넌트가 언마운트되면서, 컴포넌트가 자체적으로 가지고 있던 상태값이 휘발되어서 생긴 문제
문제 해결
기본정보 등록 컴포넌트가 언마운트 될 때 recoil-persist 라이브러리로 로컬스토리지에 폼 값을 저장
기본정보 입력 컴포넌트가 마운트 되면 react-hook-form의 default value로 recoil-persist에서 꺼내온 값을 지정한 뒤 초기화
새로고침이 되거나, 폼이 제출되면 해당 값을 초기화하기 위해 useEffect와 submitHandler에서 관리
날짜 선택은 input 이 아니라 Controller에서 관리해주고 있으므로, Controller에 defaultValue props를 내려서 해결!