EmailJS로 백엔드 없이 React에서 이메일 보내기

Jina·2025년 10월 22일

웹사이트를 만들다 보면 방문자가 나에게 메일을 보낼 수 있는 Contact Form이 필요할 때가 있다. 하지만 단순한 문의 폼을 만들기 위해 따로 백엔드를 구축하거나 서버를 연결하는 작업은 꽤 번거로울 수 있다.
이럴 때 EmailJS를 사용하면 서버 없이도 클라이언트 단에서 바로 이메일을 전송할 수 있어 간편하게 메일 기능을 구현할 수 있다.

📌 EmailJS란?

EmailJS는 클라이언트(JavaScript)에서 직접 이메일을 전송할 수 있도록 도와주는 서비스이다.
즉, 백엔드 없이도 Gmail, Outlook 등과 같은 이메일 서비스를 연동하여 메일을 보낼 수 있도록 지원한다.

✅ 특징:

프론트엔드만으로 구현 가능
이메일 서비스(Gmail, Outlook 등) 연동 지원
커스텀 메일 템플릿 작성 가능
무료 플랜 제공 (월 전송 제한 있음)

💡 왜 EmailJS를 사용할까?

상황	문제	EmailJS로 해결
Contact Form을 만들고 싶음	서버 구축 부담	클라이언트만으로 메일 전송
빠른 MVP 개발 필요	백엔드 구현 시간 소요	설정 후 즉시 사용 가능
포트폴리오 사이트에서 문의 받고 싶음	배포 후 서버 비용 우려	무료 플랜 사용 가능

간단한 문의 기능이 필요한 경우 EmailJS는 매우 실용적이다.

📝 EmailJS 사전 준비: 가입 & 기본 설정

1️⃣ EmailJS 가입

https://www.emailjs.com
에 접속 후 회원가입

2️⃣ Email Service 연결

Email Services 메뉴에서 Gmail, Outlook 등 원하는 이메일 서비스 선택 후 연결
연결 완료 시 Service ID가 발급된다.

3️⃣ Email Template 생성

Email Templates 메뉴에서 메일 양식을 생성
메일 본문에 {{name}}, {{email}}, {{message}} 등의 동적 데이터를 설정 가능
이 템플릿의 Template ID를 확인

4️⃣ Public Key 확인

Account > API Keys 메뉴에서 Public Key 확인

📌 이 3가지 값은 React에서 사용된다.
✅ Service ID
✅ Template ID
✅ Public Key

⚛️ React에서 EmailJS 적용하기

1. 패키지 설치

npm install emailjs-com

2. ContactForm 컴포넌트 작성

import React, { useRef } from 'react';
import emailjs from 'emailjs-com';

const ContactForm = () => {
  const formRef = useRef(null);

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

    emailjs.sendForm(
      'YOUR_SERVICE_ID', // 예: service_xxxxxx
      'YOUR_TEMPLATE_ID', // 예: template_yyyyyy
      formRef.current,
      'YOUR_PUBLIC_KEY' // 예: AbCdEf12345
    )
    .then(() => {
      alert('메일 전송이 완료되었습니다!');
      formRef.current.reset();
    })
    .catch((error) => {
      alert('메일 전송에 실패했습니다. 다시 시도해주세요.');
      console.error(error);
    });
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="이름" required />
      <input type="email" name="email" placeholder="이메일" required />
      <textarea name="message" placeholder="메시지" required />
      <button type="submit">보내기</button>
    </form>
  );
};

export default ContactForm;

📌 여기서 name, email, message는 EmailJS 템플릿에서 설정한 변수명과 동일해야 한다.

⚠️ EmailJS 사용 시 주의할 점

항목	주의 사항
Public Key 노출	누구나 볼 수 있으므로 민감한 서비스에는 부적합
무료 플랜 제한	무료 플랜은 월 200건 제한
스팸 처리 가능성	특정 메일 서비스에서 스팸 폴더로 분류될 수 있음
인증 문제	Gmail 사용 시 SMTP 설정 필요할 수 있음

✅ EmailJS를 추천하는 경우

추천 ✅	비추천 ⚠️
포트폴리오 연락 폼	대규모 서비스
사이드 프로젝트	민감한 데이터 포함
MVP 단계	확장성 & 보안이 중요한 경우
간단한 고객 문의	기업 SaaS 서비스