[React] 이메일 전송 폼 만들기 - EmailJS

https://emailjs.com

Send email from Javascript - no server code required | EmailJS

 

유저가 서비스 관련 피드백을 보낼 수 있도록 랜딩 페이지에 이메일 전송 폼을 넣고 ,

유저가 해당 폼을 작성하고 확인 버튼을 눌렀을 때

emailjs를 사용해 메일이 실제 개발자 이메일 주소로 전송되게 했다.

 

emailjs는 무료 플랜을 사용할 경우 한 달에 200개까지 이메일을 전송할 수 있고,

전송되는 이메일 하단에 emailjs footer가 포함된다.

 

사용자에게 전송되는 이메일이 아니라 개발자가 받을 이메일이기 때문에 footer가 있어도 상관 없고 ,

랜딩페이지에서 피드백 메일을 받는 용도라서 한 달에 200개를 넘길 일도 거의 없을 것 같아서 무료 플랜으로 선택했다.

 

사용 방법은 굉장히 간단하다.

1. 계정을 생성한다.

2. 이메일 서비스를 추가한다.

1) 대시보드에서 Add New Service 버튼을 누른다. (로그인 시 자동으로 대시보드 접속됨)

 

2) 이메일을 받을 서비스를 선택한다. (예: developer_seomoon@gmail.com 으로 메일을 전송하고 싶다면 gmail 선택)

 

3) 이메일 서비스 이름과 서비스 아이디를 설정한다. 기본값으로 둬도 되고 변경해도 상관없다.

 

4) Create Service 버튼을 누르면 해당 이메일 계정에 로그인하는 창이 뜬다.

로그인하면 이메일 서비스 추가가 완료된다.

 

3. 이메일 형식을 작성한다.

위와 같이 전송될 이메일의 형식을 작성해주면 된다.

{{ }} 안에 변수를 넣어서 사용할 수 있다.

변수는 emailjs에서 제공하는 기본 환경변수들을 사용할 수도 있고, 커스텀 변수를 사용할 수도 있다.

위 이메일 형식의 user_name, user_email은 커스텀 변수로,

리액트에서 실제로 이메일을 전송할 때 커스텀 변수 값을 설정해서 요청을 보내면 된다.

 

그러면 실제 이메일은 이런 식으로 전송이 된다. 위 형식에서 메일 제목, 내용에 서비스 이름만 추가했다.

 

4. 프로젝트에서 이메일 전송 코드를 작성한다.

설치

npm install @emailjs/browser --save

import

import emailjs from '@emailjs/browser';

설치 및 import 후에
emailjs.send() 또는 emailjs.sendForm() 메소드를 통해 이메일을 전송시키는 코드를 작성하면 된다.

• emailjs.send(serviceID, templateID, templateParams, userID);
• emailjs.sendForm(serviceID, templateID, templateParams, userID);

send()는 templateParams를 객체 형태로 작성해서 넣어주면 되고,
sendForm()은 templateParams로 Form 엘리먼트의 ref를 넣어주면 된다.

홈페이지에 있는 React 코드 예시는 sendForm()을 사용하고 있다.

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_USER_ID')
      .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>
  );
};

 

그 외에 REST API를 사용해 전송할 수도 있고, 홈페이지에 Vue.js나 Angular 등의 예시 코드도 나와있다.