클립보드에 복사

https://kyounghwan01.github.io/blog/React/clipboard-copy/#%E1%84%89%E1%85%A5%E1%84%85%E1%85%A9%E1%86%AB

클립보드 텍스트 복사하기

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard

Navigator.clipboard - Web APIs | MDN

 

React 상에서 버튼 클릭 시 지정된 텍스트를 사용자의 클립보드에 복사해주는 기능이 필요했는데

검색해보니 간단하게 구현할 수 있을줄 알았던 기능이 생각보다 고려해야될게 많아보였다.

 

고려해야될게 많아보였지만 결국 다 개소리였고 내 생각대로 간단했음.

navigator.clipboard 하나로 해결이 가능하다.

const text = '복사할텍스트';

if (navigator.clipboard) {
    navigator.clipboard
    .writeText(text)
    .then(() => {
        alert("클립보드에 복사되었습니다.");
    })
    .catch(() => {
        alert("복사를 다시 시도해주세요.");
    });
} else {
    alert("클립보드 저장 기능을 지원할 수 없는 환경입니다.");
}

위 코드를 복사 버튼 누를 때 실행되게 하면 잘 적용된다. 

 

참고한 블로그에서는 navigator.clipboard를 지원하지 않는 환경일 경우

execCommand를 쓰는 방향으로 유도하는데

어차피 지원종료된 기능이고

공식문서상에서 navigator.clipboard가 이제 대부분의 브라우저에서 지원되는것으로 보이니

위 코드만 갖다 써도 문제 없을 것이다.