[react] clipboard API 사용해보자

프로젝트를 진행하던 중 주소지를 복사하는 기능이 새로 생겨났다,, ㅎㅎ

급하게 구글링을 했으나 document.execCommand()를 이용해서 클립보드 복사는 더이상 사용하지 않는다고 한다,,, 다른 글들을 떠돌아 다니다 clipboard API를 사용하면 된다고 한다,,! ㅎㅎ

한번 써보자고~

---

navigator 객체를 사용하여 복사를 진행해보자!

navigator에서 사용할 메소드는 navigator.clipboard.writeText()이다

(이 이외에 클립보드에 있는 내용을 붙여넣기하는 navigator.clipboard.readText() 메소드도 있다.)

const handleCopyClipBoard = async (address: string) => {
    try {
      await navigator.clipboard.writeText(address);
      setToasts('클립보드에 주소가 복사되었습니다.'); // 미리 만들어둔 토스트 알림에 성공 메세지를 넣어준다.
    } catch (e) {
      setToasts('클립보드에 주소 복사를 실패했습니다.'); // 미리 만들어둔 토스트 알림에 실패 메세지를 넣어준다.
    }
  };

그러면 짜라란~ 주소가 클립보드에 잘 복사되는 것을 볼 수 있다,,!

미래의 나를 위한 코드 복붙용 게시물~!ㅎㅎ

아 해당 api를 사용할때 주의할 점은

• IE 미지원
• 일부 https 환경에서만 사용할 수 있다. (clipboard MDN 공식문서에서 브라우저 호환성에 대해 자세히 볼 수 있다.)