[EmailJS] Contact 컴포넌트 제작

 

 

 

 

오늘은 제작중인 포트폴리오 안에 제게 연락할 수 있는 Contact 컴포넌트를 만들어보았습니다.

 

기본적으로 연락을 남기시는 분의 이름, 이메일, 메세지 내용을 받는 형태로 제작하였습니다.

 

서버가 따로 없는 serverless형태로 메일 발송을 도와주는 EmailJS를 사용했습니다.

 

 

EmailJS 홈페이지

 

EmailJS 홈페이지에 로그인을 하게 되면 아래 보이시는 페이지로 이동하게 됩니다.

 

 

현재 제가 서비스를 이용중이라 gmail 서비스가 등록되어있지만,

처음 오신 분들은 위에 보이시는 Add New Service를 클릭하여 서비스를 등록해야합니다.

 

이용하실 메일을 선택하시고 Create Service를 클릭하시면 됩니다.

 

 

서비스를 생성하셨다면 이후엔 메일의 템플릿을 설정해야합니다.

 

 

Email Templates 카테고리

 

템플릿 카테고리에서 Create New Template을 클릭하셔서  메일의 양식을 원하시는대로 커스텀하실 수 있습니다.

 

Create New Temlate

 

여기서 기억하셔야할 점은 user_name, user_email, message 입니다.

 

EmailJS DOC에 들어가시면 React 예제코드를 확인할 수 있습니다.

다음 예제코드를 보면서 설명드리겠습니다.

 

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

 

코드를 보시면 form 태그 안에 user_name, user_email, message가 name으로 담겨있는 input들이 있습니다. 

각 input의 값으로 들어가는 value들이 Email template에 적용되게 됩니다.

정리해보면,

 

 

각 input에 들어가는 내용들이 설정하신 Template에 해당하는 값으로 들어가게 됩니다.  

주의할 점은 Template에 설정하신 user_name, user_email, message 같은 값이

예제 코드처럼 각 input의 name으로 들어가있어야합니다.

위 설정대로 원하시는 템플릿 형태로 작성하시면 템플릿 설정도 끝나게 됩니다.

 

 

 

마지막으로 sendEmail 함수 내에 sendForm의 파라미터들을 살펴보겠습니다.

 

'YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY'

 

 

1. YOUR_SERVICE_ID

 

 서비스 아이디는 Email Service 카테고리에 들어가시면 보이는 노란색으로 가려놓은 서비스 아이디를 넣어주시면 됩니다.

 

Email Service 카테고리

 

 

 

2. YOUR_TEMPLATE_ID

템플릿 아이디는 Email Template 카테고리에 생성하신 템플릿의 아이디를 작성하시면 됩니다.

 

Email Templates 카테고리

 

 

 

3. YOUR_PUBLIC_KEY

마지막으로 PUBLIC_KEY는 ACCOUNT 카테고리에 들어가시면 확인하실 수 있습니다.

 

Account 카테고리

 

해당 값들을 예제코드에 있는 YOUR 시리즈에 넣어주시면 EmailJS 적용 완료입니다!

 

YOUR 시리즈는 다른 사람들이 확인할 수 없도록 만들어야 보안에 유리합니다.

따라서 환경변수에 저장하고 사용하시는 것을 추천드립니다.

 

 

ps. 아래 보이시는 EmailJS 모듈까지 설치하셔야 정상작동이 됩니다!

$ npm install @emailjs/browser --save

 

 

완성된 EmailJS로 메일을 보내보았다 

 

name: 여러분

email: 12@25.com

message: 즐거운 연말 보내세요!

 

성공!