[React] react-copy-to-clipboard: 클립보드 복사 기능 구현하기

 

 

 

react-copy-to-clipboard는 React 에서 클립보드 복사 기능을 간단히 구현할 수 있는 라이브러리이다.

 

첨부된 사진처럼 이메일 주소를 복사하는 버튼을 구현해보자!

 

1. 패키지 설치하기

npm install react-copy-to-clipboard

 

2. 구현하기

<CopyToClipboard> 컴포넌트:

• text 속성에 복사할 데이터를 전달할 수 있다. 
• onCopy 속성으로 복사 이벤트가 발생할 때 실행할 함수를 지정할 수 있다.

구현할 내용!

• email 변수를 text 속성에 전달해서 이메일을 복사하게 해보자!
• onCopy에 복사 상태 변경 및 setTimeout 함수를 사용하여 버튼 텍스트를 2초간 Copied ! 로 변경해보자!

import React, { useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";

const Contact = () => {
  const [isCopied, setIsCopied] = useState(false); // 복사 상태 관리
  const email = "1234@gmail.com";

  const handleCopy = () => {
    setIsCopied(true); // 복사 상태를 true로 설정
    setTimeout(() => setIsCopied(false), 2000); // 2초 후 상태 초기화
  };

  return (
    <div>
      {/* 복사 버튼 */}
      <CopyToClipboard text={email} onCopy={handleCopy}>
        <button>{isCopied ? "Copied !" : "Copy Email"}</button>
      </CopyToClipboard>
    </div>
  );
};

export default Contact;