React(EmailJS)의 양식에서 이메일을 보내는 방법

소개

이 게시물은 ReactJS(후크 포함)에서 이메일을 보낼 수 있는 양식 및 기능을 만드는 과정을 안내합니다. EmailJS이라는 타사 서비스를 사용합니다.

간단히 말해서 EmailJS

클라이언트 측 기술만을 사용하여 이메일을 보내십시오. 서버가 필요하지 않습니다.

지원되는 이메일 서비스 중 하나 선택

이메일 템플릿 만들기

JS 라이브러리를 사용하여 이메일 트리거

EmailJS 설정

먼저 create a free account .
이제 1단계를 수행하겠습니다. 서론에서 Gmail을 이메일 서비스로 선택합니다.

'이메일 서비스' 탭에서. '새 서비스 추가' 버튼을 클릭하면 위의 사진과 유사한 내용이 표시됩니다. Gmail을 클릭합니다(이 경우 사용할 것임).

Gmail 계정과 서비스를 연결하려면 '계정 연결' 버튼을 클릭하세요. 또한 나중에 필요하므로 서비스 ID를 기억하십시오. 마지막으로 '서비스 만들기'를 클릭하고 받은 편지함을 확인하여 테스트 이메일을 받았는지 확인합니다.
알았어요? 대박!

소개 단계 2에서 템플릿을 생성합니다. 지금 해보자. 사이드 메뉴의 '이메일 템플릿' 탭으로 이동하여 '새 템플릿 만들기' 버튼을 클릭합니다. 테스트 목적으로 이 기본값을 사용합니다. 주의할 점은 이중 중괄호 안의 변수는 메서드emailjs.send(우리의 경우 React)에서 제공할 데이터로 대체될 동적 변수입니다. '저장'을 클릭하면 계속 진행할 수 있습니다.

축하합니다. 1부가 끝났습니다!🥳

반응하다

나는 당신이 반응 앱을 만드는 방법을 알고 있다고 가정합니다. 그렇지 않은 경우 this을 확인하십시오.

emailjs 패키지를 설치합시다.npm i emailjs-com
이제 가져옵니다(User ID 가져오기).

import './App.css';
import { useState } from 'react';
import { send } from 'emailjs-com';

function App() {
  return (
    <div className="App">
      ...
    </div>
  );
}

export default App;

이제 div.App 안에 양식을 만들어 보겠습니다.

<form onSubmit={onSubmit}>
  <input
    type='text'
    name='from_name'
    placeholder='from name'
    value={toSend.from_name}
    onChange={handleChange}
  />
  <input
    type='text'
    name='to_name'
    placeholder='to name'
    value={toSend.to_name}
    onChange={handleChange}
  />
  <input
    type='text'
    name='message'
    placeholder='Your message'
    value={toSend.message}
    onChange={handleChange}
  />
  <input
    type='text'
    name='reply_to'
    placeholder='Your email'
    value={toSend.reply_to}
    onChange={handleChange}
  />
  <button type='submit'>Submit<button/>
</form>

좋습니다. 계속하겠습니다. 이제 앱 구성요소는 다음과 같이 표시됩니다.

...

function App() {
  const [toSend, setToSend] = useState({
    from_name: '',
    to_name: '',
    message: '',
    reply_to: '',
  });

  const onSubmit = (e) => {
    e.preventDefault();
    {/* --- METHOD TO SEND THE MAIL --- */}
  };

  const handleChange = (e) => {
    setToSend({ ...toSend, [e.target.name]: e.target.value });
  };

  return (
    <div className='App'>
      {/* --- FORM --- */}
    </div>
  );
}
export default App;

우리는 함수 구성 요소에 React 상태를 추가할 수 있는 useState() Hook을 사용했습니다. 우리는 emailjs 템플릿에 있는 동적 이름과 동일한 인스턴스 이름을 가진 'toSend' 객체로 상태를 초기화했습니다. 또한 양식 데이터를 조작하기 위한 두 가지 방법을 만들었습니다. handleChange 상태를 업데이트하고 onSubmit 제출을 처리합니다. 바로 구현할 emailjs.send 메소드를 통해 데이터를 전송합니다.
onSubmit는 다음과 같이 표시됩니다.

const onSubmit = (e) => {
    e.preventDefault();
    send(
      'SERVICE ID',
      'TEMPLATE ID',
      toSend,
      'User ID'
    )
      .then((response) => {
        console.log('SUCCESS!', response.status, response.text);
      })
      .catch((err) => {
        console.log('FAILED...', err);
      });
  };

emailjs 대시보드에서 찾을 수 있는 send 메소드에 필요한 고유 ID를 추가하십시오.


좋아, 아무것도 없어...

해당 앱을 실행합니다( npm start ).
양식을 작성하고 제출을 클릭하십시오.
Gmail 받은편지함을 확인하세요.
알았어요?

축하해요! 당신은 락! 🥳🎊


제 첫 번째 게시물이 도움이 되었기를 바랍니다. 어떤 피드백이든 대단히 감사합니다!

감사합니다!
달리보르