2025 에 React 이메일 코드 예제 보내기

설치 및 요구 사항

@react-email/render 및 nodemailer npm 종속성을 설치해야 합니다.

npm install @react-email/render nodemailer

소스 코드 및 예제

.jsx 또는 .js 파일을 사용하여 이메일 템플릿을 만듭니다.

// email.jsx
import * as React from 'react';
import { Html } from '@react-email/html';
import { Button } from '@react-email/button';

export function Email(props) {
  const { url } = props;

  return (
    <Html lang="en">
      <Button href={url}>Visit our website</Button>
    </Html>
  );
}

이 예에서는 노드메일러 라이브러리와 공식 스폰서인 **이메일 전달**을 사용하여 아웃바운드 메일을 보내고 미리 봅니다.

발신 메일을 보내려면 비밀번호를 생성해야 합니다. **사용자 정의 도메인 SMTP 가이드로 이메일 보내기**을 따르세요.

// app.js
import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import { Email } from './email';

const transporter = nodemailer.createTransport({
  host: 'smtp.forwardemail.net',
  port: 465,
  secure: true,
  auth: {
    // TODO: replace `user` and `pass` values from:
    // <https://forwardemail.net/guides/send-email-with-custom-domain-smtp>
    user: 'you@example.com',
    pass: '****************************'
  },
});

const html = render(Email({ url: "https://example.com" }));

const options = {
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  html
};

transporter.sendMail(options);

이메일을 보내려면 앱을 실행하세요.

node app

이제 **내 계정 → 이메일**으로 이동하여 실시간 이메일 전송 상태, 이메일 전송 로그, HTML/일반 텍스트/첨부 파일 미리 보기를 확인할 수 있습니다.

P.S. 🎉 **브라우저와 iOS 시뮬레이터에서 이메일 미리 보기**과 **Node.js로 이메일 템플릿 만들기**도 사용할 수 있습니다.