React 링크복사 기능 구현하기

요즘 웹사이트에서 자주 보이는 버튼을 클릭하면 링크가 복사되는 기능을 구현해 보았다. 찾아보니 ClipBoard API 로 굉장히 간단하게 만들 수 있었다 :)

함수 작성

	const handleCopyClipBoard = async (text: string) => {
	try {
		await navigator.clipboard.writeText(text);
		alert("클립보드에 링크가 복사되었어요.");
	} catch (err) {
		console.log(err);
	}
};

따로 무언갈 설치할 필요도 없이, 위 함수 코드만 작성해주면 끝이다.
이제 링크복사가 되어야 할 태그 부분에 onClick 으로 함수를 넣어주고, 복사할 URL을 입력해주면 완료!

현재 url

현재 url은 useLocation 을 이용해 받아왔다.

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

const location = useLocation();

console.log(location)

useLocation의 pathname을 이용해서,

<div
	className="button-container"
	onClick={() => handleCopyClipBoard(`${baseUrl}${location.pathname}`)}
></div>

이렇게 복사되어야 할 URL을 파라미터로 넣어주면 복사하기 기능 완료!