전편에서 얘기했던 것처럼 클릭 시 복사가 되도록 만들어보겠다.

다양한 방법이 있다. Clipboard API의 navigator 인터페이스를 이용한 복사, document.execCommand("copy") 등의 방법들이 있고, 그렇게 사용했었는데 이번엔 외부 라이브러리를 사용해 보도록 하겠다. 바로 react-copy-to-clipboard라는 라이브러리다.

react-copy-to-clipboard

Copy to clipboard React component

카피 가능한 리액트 컴포넌트를 사용할 수 있게 만드는 라이브러리다. 각설하고 사용법을 보자.

사용법

1. 설치

npm install react-copy-to-clipboard
설치하자.

타입스크립트 사용한다면 타입을 설정해줘야하기에
npm install --save @types/react-copy-to-clipboard
이렇게 설치하자!

2. import

import CopyToClipboard from 'react-copy-to-clipboard';
가져오면 된다.

3. 적용

<CopyToClipboard text={vari}>
  <span className="variable-tooltip" title={vari}>
    {vari.slice(0, 15) + "..."}
  </span>
</CopyToClipboard>

---

이런 식으로 하면 끝난다! 좋다!

너무 간단히 끝난 거 같아 다른 팁을 줄텐데 바로 복사됐을시 표시하는 장치도 넣을 수 있다. 바로 onCopy 속성으로!

onCopy

onCopy를 쓰고 핸들러를 넣으면 알아서 감지하여 만들어 준다. 예시를 보자.

<CopyToClipboard text={vari} onCopy={handleCopy}>

이런 식으로 넣을 수 있다. 핸들러는 이런 식으로 만들어봤다.

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

  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => {
      setCopied(false);
    }, 2000);
  };

핸들러를 이렇게 만들면 state가 바뀌고, state가 바뀌면 모달이든, 툴팁이든 뜨게 만들어서 가시적으로 할 수 있다. 진짜 끝!