[React] 리액트에서 클립보드 사용하기

 

안녕하세요 펭귄 교수입니다.

 

이번 시간에는 React 에서 Clipboard API 사용하는 것에 대하여 이야기해보려고 합니다.

Clipboard API는 React 기술이 아닌 자바스크립트 기술이기 때문에 리액트 뿐만 아니라 바닐라 웹, 자바스크립트를 사용하는 다른 프레임워크에서도 사용이 가능합니다.

---

Copy

navigator.clipboard.writeText("Copy Data");

 

Paste

navigator.clipboard.readText()
.then( 
    (clipText) => ( 
        document.querySelector(".editor").innerText += clipText 
    )
)

 

React에 적용

간단하게 두 개의 버튼 (Copy, Paste) 가 있고, 두 개의 TextArea 가 있습니다.

첫 번째 TextArea에 값을 입력 후 Copy 버튼을 누르면 클립보드에 첫 번째 TextArea Value 가 등록되고,

Paste 버튼을 누르면 클립보드에 복사된 값이 두 번째 TextArea에 출력되는 프로그램을 작성해볼 것입니다.

 

전체 코드

import React, {useState} from "react";

const App = () => {
  const [data, setData] = useState("");
  const [pasteText, setPasteText] = useState("");
  const onChange = (e) => {
    setData(e.target.value);
  }
  const onCopy = (e) => {
    navigator.clipboard.writeText(data);
    alert(`Copy SUCCESS : ${data}`)
  }
  const onPaste = (e) => {
    navigator.clipboard.readText()
    .then((clipText) => setPasteText(clipText))
  }
  return (
    <>
      <p>
        <button onClick={onCopy}>Copy</button>
      </p>
      <p>
        <textarea value={data} onChange={onChange}></textarea>
      </p>
      <p>
        <button onClick={onPaste}>Paste</button>
      </p>
      <p>
        <textarea value={pasteText}></textarea>
      </p>
    </>
  );
}

export default App;

 

실행 결과

위 아래로 Copy Area, Paste Area가 있다.

 

Copy Area에 값을 작성

 

 

Copy 버튼을 눌렀을 때

 

Paste 버튼을 눌렀을 때. 클립보드 접근을 허용해야 한다.

 

허용할 시 결과

 

---

참조

Clipboard API - Web API | MDN

 

다른 글 더보기

[JavaScript] #1. 자바스크립트란?

 

[React] Title, Favicon 변경하는 법