React : 데이터 로딩 및 에러 처리하기

function ReviewForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submittingError, setSubmittingError] = useState(null);

먼저 로딩과 에러를 처리하기 위한 state를 만들어준다.

 

리뷰를 제출 중일 때도 제출하기 버튼을 누를 수 있게 된다면 

같은 요청을 여러 번 보내게 된다.

이를 방지하기 위해 로딩 중일 때는 확인(제출) 버튼을 클릭하지 못하게 만드려고 한다.

 

 

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("title", values.title);
    formData.append("rating", values.rating);
    formData.append("content", values.content);
    formData.append("imgFile", values.imgFile);

    try {
      setSubmittingError(null);
      setIsSubmitting(true);
      await createReview(formData);
    } catch (error) {
      setSubmittingError(error);
      return;
    } finally {
      setIsSubmitting(false);
    }

    setValues(INITIAL_VALUES);

    console.log(values);
  };

 

try가 시작되면 SubmittingError를 null로 설정한 다음,

catch에서 error를 만나면 error 객체를 submittingError로 설정하고 리턴해준다.

 

제출 중이라는 걸 의미하는 isSubmitting을 try가 시작되면 true로 설정하고,

에러를 만나지 않든 만나든 반드시 지나치는 finally 구문에서

isSubmitting을 false로 만들어준다. 

 

 

  return (
    <form className="ReviewForm" onSubmit={handleSubmit}>
      <FileInput
        name="imgFile"
        value={values.imgFile}
        onChange={handleChange}
      />
      <input name="title" value={values.title} onChange={handleInputChange} />
      <RatingInput
        name="rating"
        value={values.rating}
        onChange={handleChange}
      />
      <textarea
        name="content"
        value={values.content}
        onChange={handleInputChange}
      />
      <button type="submit" disabled = {isSubmitting}>확인</button>
      {submittingError?.message && <div>{submittingError.message}</div>}
    </form>
  );
}

마지막으로 확인 버튼에 disabled 속성으로 isSubmitting을 넣어주어,

isSubmitting이 true일 때, 즉 제출 중일 때는 버튼을 비활성화 시켜준다.

 

또한 에러가 존재하면, 에러 메세지를 보여줄 수 있도록 조건부 렌더링 식을 사용해줬다.