내일배움캠프 4기 React 73일차(최종프로젝트)

1. useState 순서

함수에 의해 setState가 작동한다면
함수 중간에 실행시킨다고 해도 함수의 작동이 끝나고
페이지가 재 렌더링 될 때 state의 변경이 일어난다.

Firebase storage에 image 를 업로드하고 그 url 을 state에 담아서
db에 업로드하는 로직을 짯었다.

 const onSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    let imgFileUrl = "";
    if (preview !== "") {
      const previewRef = ref(storageService, `user/${uuidv4()}`);
      await uploadString(previewRef, preview as string, "data_url");
      imgFileUrl = await getDownloadURL(previewRef);
      
      //이 부분
      setForm((prev) => ...prev, img:imgFileUrl)
      
      await addDoc(collection(dbService, "Posts"), newForm);
    }
  };

역시나 addDoc함수에 의해 db에 저장된 img 는 "" 이었다.

const onSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    let imgFileUrl = "";
    if (preview !== "") {
      const previewRef = ref(storageService, `user/${uuidv4()}`);
      await uploadString(previewRef, preview as string, "data_url");
      imgFileUrl = await getDownloadURL(previewRef);
      const newForm = {
        ...form,
        img: imgFileUrl,
      };
      await addDoc(collection(dbService, "Posts"), newForm);
    }
  };

새로 state를 변경시키지 않고 바로 얕은복사를 통해 새로운 Form을 만들어
해결하였다.