React에서 Copy-To-Clipboard 기능 구현

1. e.clipboardData.setData() 메소드를 사용하여 React의 클립보드에 복사
2. navigator.clipboard.writeText()를 사용하여 React의 클립보드에 복사
3. react-copy-to-clipboard 패키지를 사용하여 클립보드에 복사

복사 및 붙여넣기는 모든 종류의 장치 및 운영 체제에서 사용되는 보편적으로 널리 사용되는 기능입니다.

응용 프로그램을 개발할 때 텍스트와 같은 특정 값을 복사해야 하는 경우가 있습니다. 이러한 상황에서 자동으로 복사하는 버튼을 구현할 수 있습니다. 이것은 전화를 사용하는 사람들이 때때로 텍스트 선택에 어려움을 겪을 수 있기 때문에 유용합니다.

ReactJS는 사용자 친화적인 애플리케이션을 개발할 수 있도록 최적화되어 있습니다. 프레임워크를 사용하면 텍스트를 복사하는 클릭 가능한 버튼(또는 링크)을 쉽게 구현할 수 있습니다.

e.clipboardData.setData() 메소드를 사용하여 React의 클립보드에 복사

이 방법은 이벤트를 수신하고 이벤트가 발생하면 텍스트를 복사하는 쉬운 방법을 제공합니다. 핸들러는 브라우저 이벤트에 대한 참조를 수신해야 합니다.

React에서 이것은 단순히 e로 참조되는 SyntheticEvent의 인스턴스가 됩니다. 간단한 예를 살펴보겠습니다.

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    const handleCopy = (e) => {
      e.preventDefault()
      e.clipboardData.setData("Text", this.state.text)
    } 
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={(e) => handleCopy(e)}>Copy Text</button>
      </div>)
  }
}

이 예에서는 text 상태 속성에 저장된 텍스트 값이 있습니다. 그런 다음 버튼을 클릭하면 e.clipboardData.setData() 메서드를 사용하여 텍스트를 클립보드에 푸시하는 핸들러를 실행합니다.

이 메서드는 복사된 값의 유형과 값 자체의 두 가지 인수를 사용합니다.

caniuse.com에 따르면 전 세계 인터넷 사용자의 95%가 이 기능을 지원하는 브라우저를 사용합니다. 따라서 사용하는 것이 안전합니다.

navigator.clipboard.writeText()를 사용하여 React의 클립보드에 복사

Navigator 인터페이스는 보다 현대적인 API입니다. 전 세계 사용자에게 거의 동일한 지원(92%)을 제공합니다. Functional 및 Class 구성 요소 모두와 호환됩니다.

예를 살펴보겠습니다.

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={() => navigator.clipboard.writeText(this.state.text)}>Copy Text</button>
      </div>)
  }
}

보시다시피, 이것은 더 적은 코드 줄을 필요로 하는 더 간단한 솔루션입니다. 값을 가져오거나 외부 패키지를 설치할 필요가 없습니다.

이러한 이유만으로도 저에게 Navigator 인터페이스는 텍스트를 클립보드에 복사하는 더 좋은 방법입니다. playcode에서 직접 사용해 볼 수 있습니다.

Navigator 인터페이스를 사용하기 전에 Internet Explorer의 이전 버전에서는 지원하지 않는다는 점을 기억해야 합니다. 또한 Chrome에서 Navigator 인터페이스는 페이지가 보안(HTTPS 또는 localhost)으로 표시된 경우에만 작동하는 것처럼 보입니다.

이 두 가지 점 외에 이 방법을 사용하는 데에는 단점이 없습니다.

react-copy-to-clipboard 패키지를 사용하여 클립보드에 복사

외부 패키지 설치에 반대하지 않는다면 react-copy-to-clipboard가 아마도 최고의 솔루션일 것입니다. 다양한 기능에 대한 자세한 정보를 얻으려면 공식 npm 페이지를 살펴보세요.

설치가 완료되면 사용자 정의 <CopyToClipboard> 구성 요소에 액세스할 수 있습니다. text 속성을 사용하여 복사해야 하는 값을 제공할 수 있습니다. 그런 다음 텍스트 값을 클립보드에 복사하는 트리거 역할을 하는 간단한 <button> 구성 요소를 추가할 수 있습니다.