라이브러리 - React Email

React Email

 

 

✅ React Email이란?

---

이메일 클라이언트들이 최신 CSS 기능을 지원하지 않기 때문에 이메일 템플릿을 직접 작성해야 한다.

템플릿을 작성할 때 테이블도 사용해야 하는데 테이블은 작성하기가 너무 까다롭고 귀찮다.
또 외부 스타일 시트도 지원하지 않아서 모든 CSS를 HTML 안에 직접 작성해야 한다.

 

이 문제들을 해결하기 위해 나온 것이 React Email이다.

 

React Email은 Resend에서 기본으로 제공하는 패키지이다.

이걸 사용하면 ReactJS 컴포넌트를 만드는 것처럼 이메일 템플릿을 만들 수 있다.

 

https://react.email/

React Email

 

 

✅ Installation

---

npx create-email@latest

설치하면 react-email-starter라는 폴더가 생성된다.

 

해당 폴더 안으로 들어가 명령어를 실행시켜준다.

npm i

 

react-email-starter

 

react-email-starter/package.json

 

해당 폴더에서 명령어를 실행해준다.

npm run dev

그러면 localhost로 email preview를 볼 수 있다.

 

 

✅ Usage

---

import { Resend } from "resend";
import { render } from "@react-email/components";
import type { Route } from "./+types/welcome-page";
import WelcomeUser from "../../../../react-email-starter/emails/welcome-user";

const client = new Resend(process.env.RESEND_API_KEY);

// resend를 사용하지 않고 다른 email service를 사용할 경우

/* export const loader = async ({ params }: Route.LoaderArgs) => {
  const emailHtml = await render(<WelcomeUser username={params.username} />); 
  const { data, error } = await client.emails.send({
    from: "Somename <somename@mail.your.domain>",
    to: ["blabla@naver.com"],
    subject: "Welcome to wemake",
    html: emailHtml,
  });
  return Response.json({
    data,
    error,
    emailHtml,
  });
}; */

export const loader = async ({ params }: Route.LoaderArgs) => {
  const { data, error } = await client.emails.send({
    from: "Somename <somename@mail.your.domain>",
    to: ["blabla@naver.com"],
    subject: "Welcome to wemake",
    react: <WelcomeUser username={params.username} />,
  });
  return Response.json({
    data,
    error,
  });
};