import한 함수 에러 처리법

addPost: async (e, content) => {
    e.preventDefault();
    const date = dayjs();
    try {
      const docRef = await addDoc(collection(db, "posts"), {
        content,
        date: date.format("YYYY.MM.DD HH:mm:ss"),
      });
    } catch (e) {
      alert("저장에 실패했습니다");
    }
  },

다른 파일에서 이 함수를 import해서

const handleSubmitEvent = async (e) => {
    try {
      const res = await addPost(e, content);
      setContent("");
    } catch (e) {
      console.log("에러임?");
    }
  };

이 함수가 성공할 때만 - Content를 초기화 하려고 했는데 addPost 함수의 성공/실패와는 관계없이 setContent가 실행됨
(alert나 console의 경우 실험하려고 쓴 내용이라 실제로 사용시 더 정확하게 기입해줄 필요 있음)

문제

• addPost 함수에서 addDoc이라는 함수가 실패할 시 catch문으로 넘어가는건 맞음
• 하지만 addPost의 리턴값을 지정하지 않았기 때문에 성공하던,실패하던 handleSubmitEvent 함수에서 res는 undefined로 setCount('')가 실행됨

해결

addPost: async (e, content) => {
    e.preventDefault();
    const date = dayjs();
    try {
      const docRef = await addDoc(collection(db, "posts"), {
        content,
        date: date.format("YYYY.MM.DD HH:mm:ss"),
      });
    } catch (e) {
      alert("저장에 실패했습니다");
      throw e - 추가
    }
  },

이런식으로 실패했다는 것을 전달해주게 되면, setCount('')는 실행되지 않고 handleSubmitEvent 함수의 catch문으로 넘어가게 됨