react :: 리액트 텍스트 클립보드에 복사하기(react-copy-to-clipboard)

리액트로 개발한 웹 내에서 텍스트 클릭 시 클립보드에 복사되는 기능을 구현해보았다.

 

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>, .. 등의 태그가 포함되어야 정상적으로 인식된다.

없다면 렌더링 오류가 발생함!