[TIL] 클립보드 복사하기 (feat.React)

채팅방 코드를 클릭하면 클립보드에 복사되는 기능을 만들어보았다.

 

처음 시도했던 방법은 navigator를 이용하여 클립보드 복사하기.

 

 const [copied, setCopied] = useState(false);

  const handleCopyClipBoard = (text) => {
    try {
      navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch (error) {
      alert('클립보드 복사에 실패하였습니다.');
    }
  };

 

너무 간편하고 잘 작동했지만 왜인지 배포환경에선 작동하지 않음.

이유는 localhost환경과 https환경에서만 작동하기때문이었다. (IE에서도 작동하지 않음)

이걸 사용한 프로젝트는 http환경이라 작동을 안 했다...

 

두번째 방법은 라이브러리 설치!

굳이 라이브러리를 설치해야될까 고민하고 찾아봤지만.. 시간도 없고 편리한 라이브러리를 찾아서 설치했다.

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

react-copy-to-clipboard

 

먼저 라이브러리를 설치해준다

 yarn add react-copy-to-clipboard
 
 npm install --save react-copy-to-clipboard

 

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

<CopyToClipboard text={roomCode} onCopy={handleCopyClipBoard}>
	<button className={copied === true ? 'success' : ''}>
		<span>#</span>&nbsp;{roomCode}
	</button>
</CopyToClipboard>

 

라이브러리를 설치하고 CopyToClipboard 태그안에 버튼을 넣어놓고
text에는 복사할 대상을 넣어주고 onCopy는 copy가 성공했을 경우의 동작을 감지한다.

나의 경우는 복사가 성공했을 때 표시를 해주기위해 함수를 넣어주었다. 

 

 

그 결과,

http환경에서도 잘 동작한다!!