[React.js] 모바일에서도 작동하는 텍스트 클립보드 복사

1. navigator.clipboard.writeText()를 이용한 텍스트 클립보드 복사 문제

navigator.clipboard.writeText()를 이용해 텍스트를 클립보드에 복사하는 기능을 적용하였는데, 웹에서는 정상적으로 동작했지만 모바일에서는 작동하지 않았다.

[그림1] 모바일에서는 텍스트 클립보드 복사 기능이 동작하지 않았다.

 

// 모바일에서 작동하지 않았음
handleCopyClipBoard: async (text, then) => {
    try {
      await navigator.clipboard.writeText(text);
      // alert('클립보드에 링크가 복사되었습니다.');
      then(true);
    } catch (e) {
      then(false);
      // alert('복사에 실패하였습니다');
    }
  },

 

2. 모바일에서도 작동하는 react-copy-to-clipboard 패키지 활용

react-copy-to-clipboard 패키지를 이용하면 모바일에서도 텍스트 클립보드 복사 기능이 [그림2]와 같이 정상적으로 동작한다.

[그림2] "클립보드에 복사되었어요." 문구를 확인할 수 있다.

 

import { CopyToClipboard } from 'react-copy-to-clipboard';

// (생략)

<dd style={{ cursor: 'pointer' }}>
  <!-- CopyToClipboard 태그 작성 -->
  <CopyToClipboard
    text={prmDetailData.address}
    onCopy={() => {
      copyClipBoardSwal('주소'); // 스윗얼럿
    }}
  >
    <span>{prmDetailData.address}</span>
  </CopyToClipboard>
</dd>

 

react-copy-to-clipboard 설치
https://www.npmjs.com/package/react-copy-to-clipboard

 

참조 자료
https://toramko.tistory.com/entry/react-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%85%8D%EC%8A%A4%ED%8A%B8-%ED%81%B4%EB%A6%BD%EB%B3%B4%EB%93%9C%EC%97%90-%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0react-copy-to-clipboard