[React] Email.js 를 사용하여 Form 이메일 전송하기

Email을 form을 통해 전송하고자 한다. 아래는 공식 사이트이다.

 

공식사이트

Send email directly from your code | EmailJS

 

React 코드 참고

React | EmailJS

 

https://dashboard.emailjs.com/

Send email from Javascript - no server code required | EmailJS

---

EmailJS 가입과 기본 설정

1. EmailJs 홈페이지에서 회원가입을 한다.

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

로그인을 한 후 Email Service 메뉴> Add New Service 버튼클릭> 이메일 서비스에 연결할 폼을 선택해준다. (난 gmail선택함)

 

3. 이메일 서비스 이름과 서비스 아이디 설정(기본값 그대로 둬도 되고 변경해도됨)

 

4. Create Service 버튼 클릭> 해당 이메일 계정에 로그인하는 창이 뜸>로그인하면 이메일 서비스 추가가 완료됨.

 

5.Email Templates 설정하기

좌측 Email Templates 메뉴로 이동하여 템플릿을 작성한다. (나한테 오는 이메일을 어떻게 받는지 템플릿 정하는것임)나는 아래와 같이 작성했지만 마음대로 변경해서 사용하면 된다.

{{ }} 안에 변수를 넣어서 사용하면 된다.
* 변수는 내가 코드에서 실제 form 의 input값의 name에 설정하는 값과 동일해야 한다.

내가 실제 code input name에서 설정한건 user_email, ask_title, ask_message 임

 

---

React 에 EmailJS를 적용하기

 

1.설치

npm i @emailjs/browser

 

2. import

import emailjs from '@emailjs/browser';

 

3. 이메일 전송 코드 작성 (input name이 위에 email 템플릿 변수와 동일해야함)

import React, { useRef } from "react";
import { styled } from "styled-components";
import emailjs from "@emailjs/browser";

const Ask = () => {
  const form = useRef();

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

    emailjs.sendForm("내 service_id", "내 template_id", form.current, "내API_PUBLIC_KEY").then(
      result => {
        alert("성공적으로 이메일이 전송되었습니다.");
        form.current.reset();
      },
      error => {
        console.log(error.text);
        alert("이메일이 전송이 실패되었습니다.");
      },
    );
  };

  return (
    <AskContainer>
      <AskForm ref={form} onSubmit={sendEmail}>
        <Label>
          답변 받으실 이메일
          <Input type="email" name="user_email" placeholder="ex)abcd@naver.com" required />
        </Label>

        <Label>
          문의 제목
          <Input
            type="text"
            name="ask_title"
            placeholder="제목을 입력해주세요.(20자 이내)"
            maxLength={20}
            required
          />
        </Label>

        <Label>
          문의 내용
          <TextArea name="ask_message" placeholder="제목을 입력해주세요." required />
        </Label>

        <SubmitButton type="submit" value="문의하기" />
      </AskForm>
    </AskContainer>
  );
};

export default Ask;

(위에 컴포넌트들은 다 스타일 컴포넌트 적용시키느라 저렇게 쓴것임)

 

send.form 보내는것 값들은

• service_id > Email Services 메뉴에서 확인
• template ID 값 > Email Templates 메뉴에서 확인
• api_public_key 값> account>public key (아래 사진 참고)

 

 

참고사이트)

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

 

[emailJS] 자바스크립트로 이메일 보내기!