[React] mailto로 이메일 링크 열기

웹 페이지에서 이메일 주소를 클릭했을 때 사용자의 기본 메일 앱을 실행해야 하는 경우가 있다.

이때 별도의 라이브러리나 API 없이 mailto: 프로토콜을 사용하여 간단하게 메일 작성 화면을 열 수 있다.

---

mailto 프로토콜 사용

HTML에서는 <a> 태그의 href에 mailto:와 이메일 주소를 작성한다.

<a href="mailto:superman@test.com">
  메일 보내기
</a>

사용자가 링크를 클릭하면 해당 기기에 설정된 기본 메일 앱이 실행되고, 받는 사람 주소에 지정한 이메일이 입력된다.

mailto:superman@test.com

---

React에서 사용하기

React에서도 동일하게 <a> 태그를 사용할 수 있다.

<a href="mailto:roominus.official@gmail.com">
  이메일 문의
</a>

버튼이나 아이콘의 클릭 이벤트를 통해 실행해야 한다면 window.location.href를 사용할 수도 있다.

<StyledEmailIcon
  onClick={() => {
    window.location.href =
      'mailto:roominus.official@gmail.com';
  }}
/>

기존 코드처럼 window.open()을 사용하는 것도 가능하다.

<StyledEmailIcon
  onClick={() =>
    window.open(
      'mailto:roominus.official@gmail.com'
    )
  }
/>

단순히 메일 링크를 제공하는 경우에는 <a href="mailto:...">를 사용하는 방식이 가장 기본적이며, 클릭 이벤트 내부에서 다른 로직과 함께 처리해야 한다면 JavaScript를 이용하는 방식도 사용할 수 있다.

---

제목과 본문 미리 작성하기

mailto:에는 이메일 주소뿐만 아니라 제목과 본문도 함께 지정할 수 있다.

<a
  href="mailto:superman@test.com?subject=문의드립니다&body=문의 내용을 작성해주세요."
>
  메일 보내기
</a>

React에서는 encodeURIComponent()를 사용하여 제목과 본문을 안전하게 인코딩할 수 있다.

const email = 'superman@test.com';
const subject = '문의드립니다';
const body = '문의 내용을 작성해주세요.';

const mailto = `mailto:${email}?subject=${encodeURIComponent(
  subject
)}&body=${encodeURIComponent(body)}`;

<a href={mailto}>메일 보내기</a>

이를 활용하면 사용자가 메일 링크를 클릭했을 때 받는 사람뿐만 아니라 제목과 본문이 미리 입력된 상태로 메일 작성 화면을 열 수 있다.

---

마무리

mailto: 프로토콜을 사용하면 별도의 메일 전송 API 없이 사용자의 기본 메일 앱을 실행할 수 있다.

단순한 이메일 문의 링크라면 다음과 같이 한 줄만으로 구현할 수 있다.

<a href="mailto:superman@test.com">
  메일 보내기
</a>

다만 mailto:는 웹 서비스에서 직접 이메일을 전송하는 기능이 아니라 사용자의 메일 앱을 실행하는 방식이라는 차이가 있다.

따라서 고객센터 문의나 개발자 연락처처럼 사용자가 직접 이메일을 작성하도록 연결하는 기능에 간단하게 활용할 수 있다.