2025 에 React 이메일 코드 예제 보내기
HTML, CSS, JSX 템플릿, 예제, SMTP 프로덕션 준비 통합을 통해 React 웹 앱 이메일을 보내보세요.
작성자
Forward Email 팀
게시됨
10/1/25
읽을 시간
5분 이내
설치 및 요구 사항
@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로 이메일 템플릿 만들기**도 사용할 수 있습니다.