React 컴포넌트에 렌더된 텍스트를 클립보드에 복사하기

아.. 그냥 그거 본문 길게 탭해서 선택하고 복사하면 안될까요?

안된다.. 보통 안된다.

해야할일

리액트 어드민 프로젝트를 진행중에

텍스트를 클립보드에 복사해 줘야할 상황이 생겼다.

정확하게는 두개의 컴포넌트에 나누어 렌더되어있는 텍스트를 클립보드에 복사하기 버튼으로 복사해야한다.

어떻게 할 수 있을까?

navigate.clipboard.writeText()?!

console.log(navigator)

navigator객체는 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내는데 사용되는 객체로

콘솔에 때려보면 유저에 관한 다양한 정보를 담고있는 Navigator 객체가 모습을 드러낸다.

대강만 살펴도 bluetooth, cookieEnabled, geolocation, userAgent 와 같은 프로퍼티를 확인 할 수 있고

우리가 필요로하는 clipboard 도 존재한다. 거기에 writeText 메소드가 존재하니

우리가 할일은 리액트로부터 복사할 텍스트를 뽑아내서 파라미터로 넘겨주는일뿐이다.

렌더된 컴퍼넌트의 텍스트 뽑아내기

이런저런 시도끝에 ref를 사용하기로 했다. 특히 useRef훅을 사용하면 쉽게 해결할 수 있다.
ref가 지시하는 div의 current.innerText는 순수하게 렌더된 텍스트만을 가져온다.
계좌번호나, 주문번호, 주소같은것을 이런식으로 처리하면 카카오톡이나 SMS 메시지에 복사할때
유저에게 편의를 제공한다.

import * as React from "react";

const myComp = ({  record }) => {

	const myref = React.useRef();
    	return(
    		<div ref={myref}>
            	/* 복사할 내용 */
            		${record.surgeon?record.doctor:"myDoctor"}
            		${record.name?record.name:"myName}
            		${record.registeredNumber?record.registeredNumber:"99998888"}
        	</div>
           	<button onclick={navigate.clipboard.writeText(myref.current.innerText)}> COPY </button>
            )
}

이런식으로 콜백도 가능하다.

navigator.clipboard.writeText(복사할 텍스트).then(function() {
  /* 복사성공 !! ( useNotify) */
}, function() {
  /* 복사실패 */
});