[ 리액트 ] React 문자열 클립보드 복사하기

Coding/리액트
2021. 2. 20. 11:42

소개

일반적으로 웹사이트에서 클립보드 (Copy to Clipboard)에 복사하는 기능을 제공합니다. 그래서 사용자는 그들의 로컬 시스템이나 브라우저 외부에서 콘텐츠를 복사와 붙여 넣기를 할 수 있습니다. 리액트에서는 document.execCommand("copy") 메서드를 이용해서 구현할 수 있습니다.

이 강좌는 <input> 태그의 값을 버튼을 이용해 사용자가 어떻게 클립보드에 복사하는지 알아봅니다. 그리고 텍스트가 클립보드에 복사되면 성공 알림 텍스트 박스를 노출시키는 방법을 알아봅니다.

그럼 시작해 보겠습니다.

클립보드에 input 값 복사하기

이 예제는 리액트 코드로 작성되었고 input의 텍스트 값을 버튼을 통해서 복사하는 방법을 알아봅니다.

이 메서드는 물론 꼭 input text 가 아니더라도 동일하게 동작할 수 있습니다.

먼저 코드를 작성하고 차례대로 설명합니다.

여기에 코드가 있습니다.

import React, { useRef } from 'react';

function App() {

  const textInput = useRef();

  const copy = () => {
    const el = textInput.current
    el.select()
    document.execCommand("copy")
  }

  return (
    <>
      <input type="text" value="Test Text" ref={textInput} readOnly></input>
      <button onClick={copy}>copy</button>
    </>
  );
}

export default App;

먼저 copy라는 함수를 만듭니다. 이 메서드는 클립보드에 복사하는 기능을 가지고 있습니다. 함수 안에 el의 이름의 변수를 선언하고 useRef로 선언된 텍스트 필드를 할당합니다. 그리고 select 메서드를 이용해 전체 선택을 합니다.

그리고 document.execCommand("copy") 메서드를 이용해서 해당 값을 사용자의 클립보드에 복사합니다.

컴포넌트의 return() 함수 안에는 우선 텍스트 타입의 input을 생성합니다. 그리고 ref 속성과 value 속성을 지정합니다. ref 속성은 textarea에 DOM element에 접근하기 위해서 필요합니다. value는 복사될 값을 가리킵니다.

마지막으로 버튼을 만들어줍니다. 버튼은 onClick을 통해 copy 메서드를 호출하고 이 메서드는 document.execCommand("copy")를 호출하게 됩니다.

자 이제 버튼을 눌러서 실제 복사가 되는지 확인해보겠습니다.

성공 메시지 보이기

위의 코드에 한 가지 기능을 더 추가해 보겠습니다. 바로 성공 메시지입니다. input에 복사된 값을 이용해서 성공 팝업을 노출해 사용자에게 값이 복사되었다는 것을 알려줄 수 있습니다.

그렇게 하려면 리액트 코드를 다음과 같이 업데이트하세요.

import React, { useRef, useState } from 'react';

function App() {

  const [success, setSuccess] = useState(false)

  const textInput = useRef();

  const copy = () => {
    const el = textInput.current
    el.select()
    document.execCommand("copy")
    setSuccess(true)
  }

  return (
    <>
      <input type="text" value="Test Text" ref={textInput} readOnly></input>
      <button onClick={copy}>copy</button>

      {
        success ? 
        <div style={{color:'green'}}>
          Success!
        </div> : null
      }
    </>
  );
}

export default App;

첫 번째로 useState 값을 추가했습니다. success라는 boolean 타입의 useState 값을 추가합니다.

그리고 copy 함수에서 setSuccess(true)를 추가합니다. 해당 코드는 클립보드에 값이 복사되었을 때 useState 값을 true로 바꿔줍니다.

마지막으로 render 함수의 button 태그 밑에 success 값에 따라서 div 값을 노출시킵니다. 값이 true이면 Success라는 녹색의 문자가 노출되고 값이 false 라면 아무것도 노출이 되지 않습니다.

npm 라이브러리 이용해서 복사하기

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

react-copy-to-clipboard

Copy-to-clipboard React component

www.npmjs.com

지금까지 document.execCommand("copy") 메서드를 이용한 원초적인 방법을 알아봤습니다. 하지만 실제로 이렇게 사용하기는 좀 귀찮을 수 있습니다. 그래서 잘 만들어진 라이브러리를 이용해 쉽고 간단하게 특정 값을 사용자의 클립보드에 복사해 보겠습니다.

npm 또는 yarn을 이용해서 라이브러리를 추가합니다.

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

다음과 같이 사용할 수 있습니다.

text 속성은 복사될 값이고 문자열로도 표현이 가능합니다.
onCopy는 클립보드 복사 이벤트를 감지합니다.

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

<CopyToClipboard text={date}>
	<button>시간 복사</button>
</CopyToClipboard>

<CopyToClipboard text={"반복적으로 애드센스 클릭 (총 " + count + "회)"}>
	<button>문구 복사</button>
</CopyToClipboard>

<CopyToClipboard text={ip} onCopy={ console.log("copy!!! " + ip) }>
	<button>IP 복사</button>
</CopyToClipboard>

TAP 소프트