React Email 6.0

React Email 6.0이란?

React Email 6.0은 React Email의 오픈소스 업데이트로, 자체 애플리케이션에 임베드할 수 있는 시각적 이메일 편집기를 제공합니다. 또한 새로운 템플릿 세트와 React Email 컴포넌트를 임포트할 수 있는 통합 패키지를 포함합니다.

React Email 6의 핵심 목적은 팀이 React 기반 워크플로에서 이메일 레이아웃을 작성하고 이메일 준비 출력(HTML 포함)을 생성할 수 있도록 하며, 편집기를 확장 가능하고 사용자 지정 가능하게 유지하는 것입니다.

오픈소스 시각적 편집기 (독립 패키지): @react-email/editor로 편집기를 설치하고 EmailEditor를 사용해 앱에 임베드하세요.
애플리케이션에 임베드: 최소 컴포넌트 예제(return <EmailEditor />)로 React에서 직접 렌더링하세요.
코어 + 확장 아키텍처: 편집기는 내장 코어와 확장 레이어로 분리되어 코어를 변경하지 않고 사용자 지정 블록/기능을 추가할 수 있습니다.
사용자 지정 블록을 위한 조합형 노드 API (EmailNode): 블록이 HTML에 매핑되는 방식과 React Email 출력으로 렌더링되는 방식을 지정하여 새 편집기 블록을 정의하세요.
테마 지원: 기본 테마 CSS(@react-email/editor/themes/default.css)를 로드하거나 앱 스타일에 맞는 사용자 지정 테마를 구축하세요.
새 템플릿 컬렉션: 인증 흐름 및 이커머스 시퀀스와 같은 일반 사례를 위한 템플릿을 React Email 템플릿과 Figma 파일로 제공합니다.
통합 React Email 컴포넌트 패키지: react-email에서 단일 패키지로 컴포넌트를 임포트하세요 (편집기는 별도 설치 필요).

패키지 설치 또는 업데이트: React Email 5.0에서 업그레이드하는 경우 업그레이드 섹션의 지침을 따르세요.
편집기를 별도로 설치 (통합 react-email 패키지에 포함되지 않음):
- npm i @react-email/editor
React 앱에 편집기 임베드:
- @react-email/editor에서 EmailEditor를 임포트하고 컴포넌트에서 렌더링하세요.
편집기 스타일링 (선택):
- 기본 테마 CSS(@react-email/editor/themes/default.css)를 임포트하거나 자체 테마를 적용하세요.
편집기 사용자 지정 (선택):
- 조합형 API(EmailNode)를 사용해 HTML 파싱(parseHTML)과 출력 생성(renderToReactEmail)을 포함한 사용자 지정 블록을 정의하세요.
템플릿에서 시작:
- 제공된 템플릿을 기반으로 사용하거나 개별 섹션을 자체 React Email 템플릿에 가져오세요.

웹 앱에 이메일 작성기 임베드: 대시보드에 시각적 편집기를 추가해 사용자가 제품 내에서 이메일 콘텐츠를 생성할 수 있게 하세요.
특정 워크플로를 위한 사용자 지정 콘텐츠 블록 구축: EmailNode를 정의하여 콜아웃, 미디어 업로더, 임베드 소셜 게시물 또는 인라인 차트와 같은 블록을 만드세요.
일반 이메일 유형을 위한 템플릿 표준화: 새로운 인증 흐름 및 이커머스 템플릿을 사용해 초기 레이아웃 생성 시간을 줄이세요.
기존 UI 스타일과 편집기 통합: 기본 테마를 임포트해 빠르게 시작한 후, 애플리케이션에 맞는 사용자 지정 테마를 만드세요.
유지보수 가능한 이메일 컴포넌트 라이브러리 개발: 통합 react-email 패키지에서 일반 레이아웃 및 UI 컴포넌트를 임포트하면서 편집기를 별도 설치로 유지하세요.

통합 react-email 패키지에 편집기가 포함되나요?
아니요. @react-email/editor로 별도 설치합니다.
React 앱에 편집기를 직접 임베드할 수 있나요?
네. 문서에서 EmailEditor를 임포트하고 컴포넌트에서 렌더링하는 방법을 보여줍니다.
편집기에 사용자 지정 블록을 추가하는 방법은?
EmailNode를 통한 조합형 API를 사용해 블록의 HTML 파싱(parseHTML)과 React Email 렌더링 출력(renderToReactEmail)을 정의하세요.
새 템플릿은 어디서 찾을 수 있나요?
React Email 템플릿과 Figma 파일로 제공되며, 인증 및 이커머스 템플릿을 포함합니다.
React Email 5.0에서 6.0으로 업그레이드 시 달라지는 점은?
업그레이드 단계에서 @react-email/components와 @react-email/preview-server를 제거하고 react-email@latest와 @react-email/ui@latest를 설치하며, @react-email/components 대신 react-email을 사용하도록 임포트를 업데이트합니다.

일반 이메일 HTML 편집기/빌더 (비-React): 편집기 UI만 필요하고 React 기반 컴포넌트 워크플로를 원하지 않을 때 유용하지만, React Email 통합 모델을 잃습니다.
템플릿 우선 React 이메일 라이브러리: 앱에 시각적 편집기를 임베드할 필요가 없다면 편집기 확장성 없이 React 컴포넌트/템플릿에 의존할 수 있습니다.
HTML을 내보내는 WYSIWYG 편집기: 이메일 HTML 출력을 생성할 수 있지만, React Email 워크플로에 편집기 전용 사용자 지정 블록을 임베드하는 조합형 노드 접근 방식을 제공하지 않을 수 있습니다.
이메일 마크업으로 수동 변환하는 디자인 도구: Figma 우선 팀은 Figma에서 레이아웃을 만들고 이메일 코드에 수동 구현할 수 있습니다; 이는 React Email 템플릿을 직접 사용하거나 편집기 워크플로를 통해 이메일 준비 출력을 생성하는 것과 다릅니다.