EmailJS 오류

시키는 대로 했더니 뭐가 안되노

const ContactForm = () => {
  const formRef = useRef<HTMLFormElement | null>(null);

  const sendEmail = (e: { preventDefault: () => void }) => {
    e.preventDefault();

    emailjs.sendForm("***", "***", form.current, "***").then(
      (result) => {
        alert("성공적으로 이메일이 전송되었습니다.");
        form.current.reset();
      },
      (error) => {
        console.log(error.text);
        alert("이메일이 전송이 실패되었습니다.");
      }
    );
  };

  return (
    <AskContainer>
      <AskForm ref={form} onSubmit={sendEmail}>
        <Label>
          답변 받으실 이메일
          <Input type="email" name="user_email" placeholder="ex)abcd@naver.com" required />
        </Label>
        <Label>
          문의 제목
          <Input
            type="text"
            name="ask_title"
            placeholder="제목을 입력해주세요.(20자 이내)"
            maxLength={20}
            required
          />
        </Label>
        <Label>
          문의 내용
          <TextArea name="ask_message" placeholder="제목을 입력해주세요." required />
        </Label>
        <SubmitButton type="submit" value="문의하기" />
      </AskForm>
    </AskContainer>
  );
};

export default ContactForm;

 

 

그래그래

위의 오류는 form.current가 null일 가능성이 있기 때문에 TypeScript에서 오류가 발생한 것.

Ref 객체를 사용할 때 null일 가능성을 처리해야 한다.

 

 

<수정코드>

const ContactForm = () => {
  const formRef = useRef<HTMLFormElement | null>(null);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (formRef.current) {
      emailjs.sendForm("***", "***", formRef.current, "***").then(
        (result) => {
          alert("성공적으로 이메일이 전송되었습니다.");
          if (formRef.current) {
            formRef.current.reset();
          }
        },
        (error) => {
          console.log(error.text);
        }
      );
    }
  };