(JS) Clipboard API를 이용한 링크 복사 기능 구현

Clipboard API

Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다.

사용방법

• navigator.clipboard.writeText('복사할 내용')

• 비동기로 진행되어 Promise를 반환하므로, async await나 .then을 사용하면 됨

const url = window.location.href; // 현재 링크를 가져오는 코드

const copyUrl = async () => {
    await navigator.clipboard.writeText(url);
  };

...

// 온클릭 이벤트로 copyUrl 함수 실행
<img src={"/copy.png"} alt="공유하기" onClick={copyUrl} />