React에서 clipboard에 copy&paste 하기

기존에는 document.execCommand('copy') 를 사용해서 구현을 했었는데, deprecated 되었다고 합니다. 

그래서 다른 방법을 찾아보다가 useRef 를 사요해서 navigator.clipboard.writeText() 함수를 사용했는데, 로컬에서는 잘 되다가 배포이후 안되서 찾아보니 보안상의 이유로 https 에서는 복사가 되지 않는다고 하네요. 

 

그래서 결국 라이브러리를 사용했습니다. "clipboard-copy"라는 라이브러리 입니다. 

먼저 설치를 해줍니다. 

npm install clipboard-copy

 

그리고 copy라는 함수를 import 해옵니다. 

이 copy라는 함수로 useRef를 사용하여 input의 value값을 클립보드에 복사하기를 할 껍니다. 

 

import copy from 'clipboard-copy';

const App = () => {
  const inputRef = useRef();
  const handleCopy = () => {
    copy(inputRef.current.value);
    alert('복사되었습니다!');
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="복사할 문구를 적으세요~" />
      <button onClick={handleCopy}>COPY!</button>
    </div>
  );
}

결과화면