[React]GitHub Pages + React로 나만의 포트폴리오 만들기 - 4. EmailjS를 이용해 서버 없이 이메일 전송 구현하기

1. EmailJS

https://www.emailjs.com

Send email directly from your code | EmailJS

1) 위 사이트에 접속해 회원가입 후, Email Service > Add New Service 선택

2) Gmail 추가해 메일을 받을 구글 아이디와 연동

3) Email Templates로 가서 수신 이메일 양식 수정

- 여기서 사용되는 name, email, message 변수는 내가 코드의 form에서 사용할 input name 값과 동일해야 함

 

2. EmailJS 리액트 코드 작성

1) emailjs sdk 설치

npm install @emailjs/browser --save

2) emailjs 리액트 코드

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>
  );
};

- EmailJS의 공식 문서 코드임. 살짝만 바꿔서 그대로 반영하면 됨.

3) sendForm으로 전송할 Key들의 위치

- Service ID, Template ID, Public ID가 필요한데, 얘네들은 환경변수로 관리!

Service ID

Template ID

Public ID

4) 최종 코드

ContactDetail.js

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

import Card from "../components/Card";
import "../Details_css/ContactDetail.css";

const ContactDetail = forwardRef((props, ref) => {
  const form = useRef();
  const sendEmailHandler = (e) => {
    e.preventDefault();
    emailjs
      .sendForm(
        process.env.REACT_APP_EMAILJS_SERVICE_ID,
        process.env.REACT_APP_EMAILJS_TEMPLATE_ID,
        form.current,
        process.env.REACT_APP_EMAILJS_PUBLIC_KEY
      )
      .then(
        function (response) {
          console.log("SUCCESS!", response.status, response.message);
          alert(
            "이메일 전송이 완료되었습니다! 빠른 시일 내에 답장 드리겠습니다."
          );
          form.current.name.value = "";
          form.current.email.value = "";
          form.current.message.value = "";
        },
        function (error) {
          console.log("FAILED...", error);
        }
      );
  };
  return (
    <div className="Contact" ref={ref}>
      <h1 className="contact-title">
        <a name="Contact">Contact</a>
      </h1>
      <p>
        <a href="mailto:leesengjie@jbnu.ac.kr" className="email-link">
          📧 leesengjie@jbnu.ac.kr
        </a>
      </p>
      <div className="contact-card-wrapper">
        <Card className="contact-card">
          <form className="contents" ref={form} onSubmit={sendEmailHandler}>
            <h3>Name</h3>
            <input type="text" name="name" />
            <h3>Email</h3>
            <input type="email" name="email" />
            <h3>Message</h3>
            <textarea name="message" />
            <div className="send-btn">
              <button type="submit">Send</button>
            </div>
          </form>
        </Card>
      </div>
    </div>
  );
});
export default ContactDetail;

 

3. 결과 🎉