클립보드에 텍스트 복사하기

1. execCommand

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

• input에 ref를 삽입 > select()로 복사하고자 하는 영역을 선택
• aCommandName에 'copy' 입력
• execCommand는 deprecated 되었다 ...

const CopyByExeCommand = () => {
  const copyRef = useRef<HTMLInputElement>(null)
  const copyByExeCommand = () => {
    const copiedEl = copyRef.current
    copiedEl!.select()
    document.execCommand('copy')
    alert(`${copiedEl!.value}을 클립보드에 복사했습니다.`)
  }
  return (
    <form>
      <input ref={copyRef} type="text" readOnly value="copy test 1" />
      <button onClick={copyByExeCommand}>copy</button>
    </form>
  )
}

2. Clipboard API

• Clipboard API는 document.execCommand() 를 대체하기 위해 생겨남.
• 전역 navigator.clipboard를 사용해 시스템 클립보드에 접근
• Clipboard interface의 writeText() 메소드는 프로미스를 반환함.

const CopyByClipBoardAPI = () => {
  const copyByClipBoardAPI = () => {
    const copiedText = 'https://e21.link/3bwhAXm'
    navigator.clipboard.writeText(`${copiedText}`)
    .then(()=>{
        alert(`${copiedText}을 클립보드에 복사했습니다.`)
    })
    .catch(()=> {
        alert(`복사 실패!`)
    })
    
  }
  return (
    <form>
      <input type="text" readOnly value="copy test 2" />
      <button onClick={copyByClipBoardAPI}>copy</button>
    </form>
  )
}

https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand#commands
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API