[REACT] 리액트에서 EmailJS 사용하기

https://www.emailjs.com/

Send email from Javascript - no server code required | EmailJS

 

 

사이트에 접속해서 로그인 후

'Add New Service' 클릭 한다.

 

 

 

사용할 메일 선택을 선택한다.

 

 

 

'Name'에는 원하는 이름을 넣으면 되고,

'Service ID'는 자동 생성되는 key이다. 그냥 그대로 사용하면 된다.

'Connect Account'를 클릭하고

 

 

 

연결한 이메일을 선택하고 보안 관련 약관에 동의하면 '계속'을 클릭한다.

 

 

 

선택한 이메일 계정이 잘 연결되었으면 'Create Service'를 클릭한다.

 

 

 

연결이 잘 되었다.

 

 

 

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

필요한 코드를 복사한다.

여기서 우리가 바꿔줘야 할 값은

'YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', 'YOUR_PUBLIC_KEY'

이렇게 세가지 이다.

 

 

 

'YOUR_SERVICE_ID' 자리에 복사·붙여넣기.

 

 

 

'YOUR_TEMPLATE_ID' 자리에 복사·붙여넣기.

 

 

 

'YOUR_PUBLIC_KEY' 자리에 복사·붙여넣기.

 

 

 

3가지 항목을 잘 바꿨으면 이제 작성중인 코드로 돌아온다.

'form' 변수명과 'sendEmail' 함수명을

<form> 태그 안의 ref와 onSubmit의 값에 각각 넣어준다.

 

 

 

이제 거의다 왔다.

<input>,<textarea> 태그의 name을 잘 기억하고 (name, email, message)

 

 

 

다시 사이트로 돌아와서

'My Default Template'를 클릭한다.

 

 

 

세개의 name들을 중괄호 3개를 겹친 안쪽에 넣어준다.

이 양식대로 메일이 오는것이니 본인이 원하는 양식으로 자유롭게 변경하면 된다.

 

 

 

이제 테스트 메일 발송을 해보면

작성했던 양식대로 메일이 잘 도착했다!

 

끝~