React 08 - react-copy-to-clipboard 사용해 보기

react-copy-to-clipboard로 특정 텍스트를 클립보드에 복사하는 기능을 제공!

 

나는 특정 버튼을 클릭하면 특정 텍스트가 복사되어, 다른 곳에 자유롭게 붙여넣기 할 수 있는 코드를 구현해 보았다.

<CopyToClipboard text={linkToCopy} onCopy={() => CopyEtc(true)}>
	<ButtonL
	onClick={(e) => {
		e.preventDefault();
	}}
	>
	복사하기
	</ButtonL>
</CopyToClipboard>

npm i react-copy-to-clipboard

 

Props 설명

1. text

- 클립보드에 복사할 텍스트

2. onCopy

- 텍스트가 성공적으로 복사되었을 때 호출되는 콜백 함수

3. children

- 클릭 가능한 React 요소.

- 버튼, 텍스트, 이미지 등 자유롭게 사용 가능

 

이 라이브러리를 사용하면 복사 구현이 너무 간단하기 때문에 너무 좋지만...

보안 설정이 엄격하거나 구형 브라우저일 경우 지원하지 않을 수도 있다고 한다.

그럴 때는 Clipboard API를 사용해야 한다!