React)유저가 전송할 수 있는 메일 폼 만들기(EmailJS)

선 결과물 후 과정

 

다른 사람들은 sns 같은 걸 어떻게 그리 많이 하는지 contact에 이것 저것 많이도 달아놓던데 나는 도저히 넣을게 없어서 메일폼을 넣기로 했다.

 

그런데 메일폼 만드는 거 별거 아닌 줄 알았으나, 서버 없이 구현하려면 한 가지 방법은 구글 스프레드 시트를 이용하는 것이고 두번째 방법은 내가 사용한 EmailJS를 사용하는 방법이다. 

솔직히 말하자면 구글 스프레드 시트를 사용하는 방법이 있다는 건 이미 EmailJS로 해당 기능을 전부 구현한 뒤에야 알았다 ^^.. 그래서 나는 선택지 없이 EmailJS로.. 취향 따라 쓰면 될 것 같다.

 

본 포스팅에서는 HTML이나 CSS 스타일링, onclick 함수 등에 관한 내용은 다루지 않는다.

EmailJS의 기본적인 사용법과 나는 어떤 식으로 사용했는지만 다룰 예정이며 사실 EmailJS 사이트에 그냥 복사 붙여넣기해서 사용 가능한 수준으로 정리되어 있으니 여러분은 그냥 Docs 보세요.. 

 

 

 

1. EmailJS 회원가입 및 기본 설정하기

https://www.emailjs.com/

위 사이트에서 회원가입 후 계정 관리로 들어간다.

1-1 Email Services에서 사용할 본인 메일 연동하기 (Service ID 추후 사용됨)

1-2 Account에서 Public Key 생성해놓기

1-3 Template에서 본인의 메일 템플릿 생성하기 

 

처음에 보면 이게 뭔가 싶을수도 있는데 그냥 내가 메일 보내는 사람에게 수집할 정보와 어떤 형식으로 오게 할건지 지정해주면 된다.

{{from_name}}, {{phone}} 등은 그냥 변수라고 생각하고 내 마음대로 이름 정해주자.

+ To Email은 말 그대로 어떤 메일 주소로 나한테 메일이 올 지를 정하는 것이다. 이 EmailJS라는 것은 그냥 내 계정으로 나한테 메일을 보내는 원리라서 이 것을 내 메일 주소로 설정한다면 그냥 나에게 셀프로 보낸 메일로 취급된다. 본인 희망대로 작성하면 됨.

 

Auto-Reply는 상대방이 메일을 보내자마자 상대방이 기재한 메일 주소로 메일을 보내주는 기능이다.

앞의 템플릿 작성법과 같다.

 

2. 설치 및 세팅

터미널을 통해 라이브러리를 설치하고 사이트에서 제공하는 코드를 그대로 긁어서 붙여넣자.

yarn add @emailjs/browser --save
npm install @emailjs/browser --save

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
};

 

정말 너무너무너무 친절하다..

1번에서 준비한 SERVICE_ID, TEMPLATE_ID, PUBLIC_KEY를 복사해서 코드에 붙여넣고 input의 name에 우리가 템플릿에서 지정해준 {{이런 변수명 같은 것들}}을 넣어주면 해당 위치에 인풋 값이 들어간 상태로 메일이 온다.

 

 

3. 코드 본인 입에 맞게 수정해서 완성하기.

 

다들 알아서 잘하실테니 그냥 제가 만든 예제만 올리겠습니다..

export const Email = () => {
  const form = useRef();
  const dispatch = useDispatch();

  const closeEmail = () => {
    dispatch({ type: "CLOSE_EMAIL" });
  };

  const sendEmail = (e) => {
    e.preventDefault();
    emailjs
      .sendForm(
        "비밀",
        "비밀",
        form.current,
        "비밀"
      )
      .then(
        (result) => {
          alert("전송되었습니다.");
          closeEmail();
        },
        (error) => {
          alert("전송을 실패했습니다.");
        }
      );
  };

  return (
    <EmailForm ref={form} onSubmit={sendEmail}>
      <button onClick={closeEmail}> X </button>
      <label>Name</label>
      <input type="text" name="from_name" placeholder="이름을 입력해주세요." />
      <label>Phone</label>
      <input type="tel" name="phone" placeholder="연락처를 입력해주세요." />
      <label>Email</label>
      <input type="email" name="email" placeholder="메일 주소를 입력해주세요" />
      <label>Message</label>
      <textarea name="text" />
      <input type="submit" value="Send" />
    </EmailForm>
  );
  };

 

창 닫기 버튼 만들고 placeholder 지정해준 것 외에 딱히 건드린 건 없다.

나 같은 경우는 모달 형태로 이메일 폼을 만들었기 때문에 이메일이 전송되면 창이 닫히도록 설정했다.

css 스타일링은 너무 대충 만들어서 부끄러워 차마 올릴 수가 없다.

 

 

아무튼 정상적으로 작동시키는 것 성공.