[React] Email js 사용하여 사용자에게 이메일 보내기(form 제출X)

목표

form 제출이 아닌, 사용자가 이메일 인증 버튼을 단순히 클릭했을 때 메일을 보낸다.

 

 

회원가입 진행

email js 홈페이지 : https://www.emailjs.com/

 

 

서비스 생성하기

해당 예제는 gmail을 사용했습니다.

1. 왼쪽 Email Services 클릭 -> Add New Service 클릭
2. 이용할 이메일 서비스 선택 ( 해당 예제에서는 gmail 사용)
3. Service Name과 Service ID를 작성한다.  -> ServiceName, ID는 추후 코드에서 사용
4.Connect Account 연결 후 서비스 생성

 

 

템플릿 생성하기

1. 왼쪽 Email Templates 클릭 -> Add New Template 클릭
2. 템플릿 작성
3. settings에 들어가서 Template Name과 Template ID를 작성한다. 
4.Connect Account 연결 후 서비스 생성

 

     - {{ }} 안에 적혀진 변수는 그냥 변수일 뿐이므로 이름도 그냥 마음대로 지으면 된다. -> 추후 리액트에서 보내줘야할 값들
    - To Email : 수신 대상
    - From Name : 발신자
    - From Email : 발신자 이메일 - 체크박스 클릭하면 로그인한 계정 이메일로 자동 발송

 

 

settings에 들어가서 템플릿 명과 ID를 작성하면 된다.

 

public key 저장(복사)
노출 xxx!!!!

왼쪽 Account 메뉴 또는 오른쪽 상단에 내 아이디 클릭

 

리액트 코드 작성

화면에서 인증 버튼을 클릭하면 이메일 발송하는 코드

// yarn
yarn add emailjs-com

// npm
npm install emailjs-com

import emailjs from 'emailjs-com';
import { useState } from 'react';

function EmailButton() {
    const [isEmailSent, setIsEmailSent] = useState(false);
    const sendVerificationEmail = () => {
        // 이메일 보내기
        // 여기서 정의해야하는 것은 위에서 만든 메일 템플릿에 지정한 변수({{ }})에 대한 값을 담아줘야한다.
        const templateParams = {
            to_email: // 수신 이메일 ex) test@test.gmail.com,
            from_name : test,
            message: '인증되었습니다.'
        };

        emailjs
            .send(
                'test-service', // 서비스 ID
                'test-template', // 템플릿 ID
                templateParams,
                '----------', // public-key
            )
            .then((response) => {
                console.log('이메일이 성공적으로 보내졌습니다:', response);
                setIsEmailSent(true);
                // 이메일 전송 성공 처리 로직 추가
            })
            .catch((error) => {
                console.error('이메일 보내기 실패:', error);
                // 이메일 전송 실패 처리 로직 추가
            });
    };

    const handleVerification = () => {
        sendVerificationEmail();
    };

    return (
        <div>
            <h2>이메일 인증</h2>
            {isEmailSent ? (
                <p>
                    인증 이메일이 성공적으로 발송되었습니다. 이메일을
                    확인해주세요!
                </p>
            ) : (
                <button onClick={handleVerification}>인증</button>
            )}
        </div>
    );
}

export default EmailButton;

 

메일함에서 확인