React) textarea에 있는 값 클립보드에 복사하는 기능 만들기

 

import React from 'react';
import FileCopyIcon from '@material-ui/icons/FileCopy';
import { Tooltip, IconButton } from '@material-ui/core';


export default function Example({ resultText }) {

    const handleClickCopy = (resultJson) => {
        if (!document.queryCommandSupported("copy")) {
            return alert("복사하기가 지원되지 않는 브라우저입니다.");
        }

        const textarea = document.createElement("textarea");
        textarea.value = JSON.stringify(resultJson, undefined, 10);
        textarea.style.top = 0;
        textarea.style.left = 0;
        textarea.style.display = "fixed";


        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
        alert("클립보드에 복사되었습니다.");
    }
    
    return (
        <>
        	<Tooltip title="clipboard" placement="right">
            	<IconButton variant="contained" color="primary" onClick={() => handleClickCopy(resultText)}><FileCopyIcon /></IconButton>
            </Tooltip>
            
            <textarea className="result-container" value={JSON.stringify(resultJson, undefined, 10)}></textarea>
        </>
    );
}

---

References

• https://kyounghwan01.github.io/blog/React/clipboard-copy/#%E1%84%8B%E1%85%A8%E1%84%89%E1%85%B5-%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3