[React] CopyToClipboard 구현하기

Copy-To-Clipboard 구현하기

 

개발을 하다 보면 특정 값을 복사해야 하는 경우가 있는데, 이러한 상황에서 자동으로 복사하는 버튼을 구현할 수 있습니다.

텍스트를 복사하는 방법에는 여러가지가 있지만 그중에서도 Navigator Web API 를 사용하면 복사하는 기능을 쉽게 구현할 수 있습니다.

 

 

Navigator

Navigator 인터페이스는 사용자에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 어플리케이션을 특정 활동에 등록할 때 사용합니다.  Navigator 객체는 window.navigator 읽기 전용 속성으로 접근할 수 있습니다    - MDN

 

 

 

navigator.clipboard.writeText(text)

 

장점

1. 간단한 코드로 복사 기능을 구현 할 수 있습니다.

2. 값을 가져오거나 외부 패키지를 설치할 필요가 없습니다.

 

예제

const Test = () => {
  const copyText = "복사할 텍스트입니다.";
  const handleCopy = () => {
    navigator.clipboard.writeText(copyText);
  };

  return (
    <div>
      <p>{copyText}</p>
      <button onClick={handleCopy}>Copy Text</button>
    </div>
  );
};

export default Test;