[Study] 개발 공부/[React] 리액트 공부
[React] react-copy-to-clipboard: 클립보드 복사 기능 구현하기
지공A
2024. 11. 25. 16:34
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;