링크 복사 기능 구현하는 Clipboard API

  const handleCopyLink = (url) => {
    navigator.clipboard.writeText(url);
  };

url에는 string 형식으로 아무거나 들어갈 수 있다!

나는 버튼을 클릭하면 해당 페이지의 링크가 복사되길 바랐기때문에

함수가 실행될 때 url을 파라미터로 넘기는 식으로 구현했다.

 

현재 페이지의 URL을 체크하는 방법은 아래와 같다.

import { useLocation } from "react-router-dom";

const location = useLocation();

 

location을 콘솔 찍어보면 pathname이라는 키가 들어있다.

 

 handleCopyLink(`${baseUrl}${location.pathname}`)

baseUrl은 페이지의 기본URL,

페이지에 따라 달라지는 URL부분은 location.pathname으로 받아오면 끝!

 

 

 

https://curryyou.tistory.com/480

[JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API

 

https://velog.io/@jellyjw/React-%EB%A7%81%ED%81%AC%EB%B3%B5%EC%82%AC-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

React 링크복사 기능 구현하기