[MBTI 테스트 사이트 만들기 #2] 이메일 보내기 버튼 만들기

[MBTI 테스트 사이트 만들기 #2] 이메일 보내기 버튼 만들기

MBTI 사이트의 하단에 위치한 이메일 버튼을 만들고, 개발자에게 이메일을 보낼 수 있는 기능 만들기

1. 아이콘 선택

이메일 그림이 그려져 있는 아이콘을 다운로드한다. (canva에서 png파일로 다운로드) 다운을 받았으면 내 프로젝트에 이미지들이 모여있는 assets>img폴더로 이동한다.

2. 버튼 컴포넌트 추가

EmailButton 컴포넌트를 생성하고, 초반에 렌더링 될 App 컴포넌트에 해당 컴포넌트를 위치시킨다.

import React, { useRef } from "react";
import emailIcon from "../../assets/img/email.png"; //다운받은 이메일 아이콘

function EmailButton() {
  const sendEmail = () => {
    window.location.href = "mailto:eunjitech@gmail.com";
  };

  return (
    <img
      style={styles.iconEmail}
      src={emailIcon}
      alt="email-icon"
      width="50px"
      onClick={sendEmail}
    />
  );
}

const styles = {
  iconEmail: {
    cursor: "pointer",
    position: "fixed",
    bottom: 10,
    right: "5vh",
  },
};

export default EmailButton;

• window.location.href = "mailto:[이메일주소]" : 해당 버튼을 클릭하면 새 창으로 이메일을 작성할 수 있도록 링크가 생성된다.
• position: "fixed" : 요소의 위치를 고정으로 해준다.

EmailButton 컴포넌트를 재사용 하려면, email주소를 props로 전달받아 쓰면 된다. 

EmailButton 컴포넌트 재사용 (props)

function EmailButton({ email = "eunjitech@gmail.com" }) {
  const sendEmail = () => {
    window.location.href = `mailto:${email}`;
  };

...

export default EmailButton;

• {email = "eunjitech@gmail.com"} : email parameter의 기본값을 가진다. 함수에 전달된 props가 전달되지 않은 경우 기본값을 사용한다.

function App() {
...

  return (
    <div className="App">
      <EmailButton email="eunjitech@gmail.com"/>
      ...
    </div>
  );
}

export default App;

버튼 구현 화면