LabEx
로그인무료 가입

React 이메일 링크 컴포넌트 생성

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 이메일을 보낼 수 있도록 형식이 지정된 링크를 생성하는 React 의 Email Link 컴포넌트를 만드는 방법을 배웁니다. 이 컴포넌트는 mailto: 링크 형식을 사용하며, 이메일 수신자, 이메일 제목 및 이메일 본문에 대한 props 를 받습니다. 또한 encodeURIComponent를 사용하여 이메일 제목과 본문을 안전하게 인코딩하는 방법도 배웁니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 96%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

이 함수는 클릭 시 사용자의 이메일 클라이언트를 열고 지정된 제목과 본문 내용으로 새 이메일을 채우는 링크를 생성합니다. 링크는 mailto: 프로토콜을 사용하여 형식이 지정됩니다.

이 함수를 사용하려면 수신자의 이메일 주소와 함께 email prop 을 제공하고, 선택적으로 초기 내용으로 이메일을 채우기 위해 subject 및 body prop 을 제공합니다. 이러한 props 는 링크 URL 에 추가되기 전에 encodeURIComponent를 사용하여 안전하게 인코딩됩니다.

링크는 제공된 children을 내용으로 렌더링됩니다.

const Mailto = ({ email, subject = "", body = "", children }) => {
  const params =
    subject || body
      ? `?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(
          body
        )}`
      : "";

  return <a href={`mailto:${email}${params}`}>{children}</a>;
};

사용 예시:

ReactDOM.createRoot(document.getElementById("root")).render(
  <Mailto email="foo@bar.baz" subject="Hello & Welcome" body="Hello world!">
    Mail me!
  </Mailto>
);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 이메일 링크 (Email Link) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.