라우터 설정/사용 시 주의점

페이지 이동 후 남은 로직에 대한 처리

useForm 사용 시 전달해주는 onSubmit 함수에서 라우터 처리를 해버리면


onSubmit: async values => {
			...
      history.push(`/series/${id}`);
    },

onSubmit함수가 끝난 후 페이지가 넘어가 버리기 때문에 남아있는 로직(setErrors, setIsLoading)들이 실행되지 못해 오류가 발생한다


const handleSubmit = async e => {
    setIsLoading(true);
    e.preventDefault();
    const newErrors = validate(values);
    if (!newErrors || Object.keys(newErrors).length === 0) {
      const resErrors = await onSubmit(values);
      setErrors({
        ...newErrors,
        ...resErrors,
      });
    } else setErrors(newErrors);
    setIsLoading(false);
  };

해결법

useForm컴포넌트가 마운트 될 때 처리하지 못한 로직들이 종료되도록 useEffect에서 cleanUp함수를 반환해준다


useEffect(
    () => () => {
      setErrors({});
      setIsLoading(false);
    },
    [],
  );

라우터 작성 순서

라우터 컴포넌트 사용시 url 구성에 따라 순서가 중요하다