React 프로젝트에 emailjs 적용하기

개인 포트폴리오나 회사 사이트에 이메일을 보내는 폼양식 페이지를 본적이 있을것이다.

 

이메일 보내는 폼을 emailjs 라는 라이브러리를 통해 리액트 프로젝트에 적용시켜보고자 한다.

 

먼저 https://www.emailjs.com/ 에 접속 한다.

 

회원가입을 해준다.

회원가입을 한후 리액트 프로젝트에

 

yarn add @emailjs/browser

npm install @emailjs/browser --save

emailjs 라이브러리를 설치 해준다.

 

 

 

다시 아까 회원가입한 계정으로 email js 로그인 후 

왼쪽 사이드 메뉴바에 위치한 Email Services 를 클릭해서 들어간다.

 

해당화면이 나온다.

Add New Service 를 클릭해 서비스를 등록해준다.

 

필자는 Gmail 로 진행하였다.

 

서비스 추가를 완료 하게 되면 아래 이미지처럼 나온다.

 

서비스 추가 완료

ServiceId 를 기억해놓도록 하자.

 

그다음 이메일 템플릿을 만들어줄 차례다.

 

왼쪽 사이드 메뉴바에 Email Services 밑에 위치한 Email Templates에 들어가준다.

 

해당 화면이 나오게된다.

Create Eew Template 버튼을 눌러 템플릿을 만들어준다.

 

필자는 이렇게 커스텀 하였다.

오른쪽 상단 To Email 에는 받을 이메일을 넣어준다.

 

{{}} 에 있는 요소는 프로젝트내에 폼 태그 자식요소 name 이랑 같아야 한다.

 

템플릿 저장후 완료 화면

템플릿 id를 기억해놓도록 하자

 

다음은 프로젝트에 이메일 폼을 넣을 차례다.

 

emailjs docs를 확인하면 리액트 프로젝트 예제를 확인할수 있다. (리액트 뿐만 아니라 다른 프레임워크 및 모던 자바스크립트도 확인할수있다.)

 

 

 

https://www.emailjs.com/docs/examples/reactjs/

React | 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>Email</label>
      <input type="email" name="email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
};

필자는 템플릿에 email 과 message만 넣었기 때문에 docs 예제에서 name은 지워주었다.

 

semdForm에 들어갈 인수값 YOUR_PUBLIC_KEY 는 

 

Welcome, 아이디 부분을 클릭하면 확인 할수 있다.

 

아까 기억해놓았던, 서비스 아이디와 템플릿 아이디도 인수로 넣어준다. (기억이 안나도 페이지에서 확인할수있다)

 

리액트 프로젝트에서 submit 버튼을 눌러 메일이 잘가는지 확인해본다.

 

 

정상적으로 이메일이 오면 Result에 OK가 떨어진다.

위의 이미지처럼 메일이 정상적으로 갔다면 Email History 메뉴에서 확인이 가능하다.

 

 

틀린 내용이 있다면 언제든 태클 걸어주세요 감사합니다 :)

 

출처:https://www.emailjs.com/