리액트로 개발한 웹 내에서 텍스트 클릭 시 클립보드에 복사되는 기능을 구현해보았다.
1. navigator.clipboard 사용
다음과 같이 navigator.clipboard 를 사용할 경우 웹에서 잘 작동한다.
const handleCopyClipBoard = (text: string) => {
try {
navigator.clipboard.writeText(text);
alert('클립보드에 복사되었습니다.');
} catch (error) {
alert('클립보드 복사에 실패하였습니다.');
}
};
return (
<div className='Toramko'>
<button onClick={() => handleCopyClipBoard('토람은행 123-456-7890')}>
토람은행 123-456-7890
</button>
</div>
);
위 내용을 실행시키면,
button 태그에 의해 위와 같이 버튼이 생성될 것이다.
이제 이 버튼을 클릭하면,
짠! 클립보드에 복사되었다는 알림창이 뜨며 정상적으로 복사가 된다.
하지만 위 방식은 모바일에서는 잘 작동하지 않았다.
하여 다음과 같은 방법들도 시도해보았다.
# deprecated 되었다는 문구 뜨며 동작도 안됨
document.execCommand("copy")
# 걍 안됨;
function toram = (e) => {
e.preventDefault();
e.clipboardData.setData('Text', text)
}
위 방법들도 실패.
(위 방법들로 되는 사람은 그대로 사용하면 됨!)
2. react-copy-to-clipboard 사용
결국 패키지를 활용하기로 하였다.
1) react-copy-to-clipboard 패키지 설치
npm install --save react-copy-to-clipboard
2) CopyToClipboard 컴포넌트 활용하여 코드 작성
import {CopyToClipboard} from "react-copy-to-clipboard/src";
<CopyToClipboard className="Toram" text="토람은행 123-456-7890" onCopy={() => alert("클립보드에 복사되었습니다.")}>
<text>토람은행 123-456-7890</text></CopyToClipboard>
CopyToClipboard 를 import 하고
CopyToClipboard 태그의 'text' 에다가 복사할 텍스트를 입력하면
클릭 시 자동으로 클립보드에 복사된다.
그런데 이 때, 클릭해도 아무런 반응이 없기 때문에 복사가 제대로 됐는지 눈으로 알기 어렵다.
이 경우 'onCopy' 를 통해 복사 후 실행될 함수를 작성할 수 있다.
위 코드에서는 alert 를 사용하여 복사 후 확인창이 나타나도록 하였다.
정상적으로 복사 후 알림창까지 확인하였다.
위 방법으로 데스크톱 뿐만 아니라 모바일에서도 잘 동작하는 것을 확인했다 :D
* 참고 1
CopyToClipboard 태그 사이에
<text>, <button>, .. 등의 태그가 포함되어야 정상적으로 인식된다.
없다면 렌더링 오류가 발생함!
':: frontend > react.js' 카테고리의 다른 글
react :: 모바일에서 클릭(터치) 시 파란 하이라이트(highlight) 생기지 않게 하기 (0) | 2022.06.08 |
---|---|
react :: 텍스트(text)와 컴포넌트(component) 정렬(align)하기 (네이버 지도 정렬하기) (0) | 2022.05.09 |
react :: 웹사이트 탭 아이콘(favicon), 제목(title) 설정하기 (0) | 2022.04.02 |
react :: 인텔리제이(IntelliJ) 에서 리액트(React) 프로젝트 생성하기 (0) | 2022.03.24 |
npm :: 인텔리제이(IntelliJ) "'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다." 오류 해결 (0) | 2022.03.22 |