Clipboard API를 이용한 클립보드 복사 기능 구현하기

프로젝트를 진행하던 중 초대 코드를 클립보드에 복사하여 공유할 수 있도록 하는 기능이 필요했다.
평소 다른 서비스에서는 굉장히 많이 쓰는 기능 중 하나지만 직접 구현해보는건 처음이였다.

추후에도 사용될 가능성이 높기 때문에 Clipboard API 사용법을 정리한다.

Clipboard API란?

Clipboard API는 웹 브라우저에서 클립보드에 텍스트를 저장하게 해주는 API이다. document.execCommand()라는 함수도 클립보드에 텍스트를 저장할 수 있지만 2022년 06월을 기준으로 웹 표준에서 Deprecated 되었기 때문에 사용하지 않기로 했다.

Clipboartd API는 IE를 지원하지 않으며, Safari 13.1 버전부터는 https 환경에서만 해당 기능을 지원한다. navigator.clipboard를 통해 전역으로 접근 할 수 있다.

사용하기

복사 기능을 지원하는 함수는 writeText()이다. 위 함수를 사용해 구현한 코드는 다음과 같다.

const onClick = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      alert('초대코드가 복사되었습니다!');
    } catch (e) {
      alert('초대코드 복사에 실패했습니다ㅜㅜ');
    }
  };

try-catch문을 사용해 성공여부에 따른 액션을 작성하면 된다.

<button onClick={() => {onClick(message)}} />

복사할 문자열을 props로 넘겨주면 정상적으로 문자열이 복사되는 것을 볼 수 있다