React에서 Clipboard API 사용하기

 

1. Clipboard API란 무엇인가?

Clipboard API는 웹 애플리케이션에서 텍스트, 이미지 등의 데이터를 클립보드에 복사하거나, 클립보드에서 데이터를 읽어오는 기능을 제공합니다. 이 API는 사용자의 작업을 단순화하고 더 나은 사용자 경험을 제공하기 위해 자주 사용됩니다.

React 환경에서 Clipboard API를 사용하면 사용자가 버튼 클릭만으로 텍스트를 복사하거나, 외부 데이터를 애플리케이션에 붙여넣을 수 있는 기능을 간단히 구현할 수 있습니다.

---

2. Clipboard API의 주요 메서드

Clipboard API는 navigator.clipboard 객체를 통해 접근할 수 있으며, 주로 다음 메서드를 사용합니다:

1. writeText()
   클립보드에 텍스트를 복사합니다.
2. navigator.clipboard.writeText("복사할 텍스트").then(() => { console.log("텍스트가 클립보드에 복사되었습니다!"); }).catch((error) => { console.error("복사 중 오류 발생:", error); });
3. readText()
   클립보드에서 텍스트를 읽어옵니다.
4. navigator.clipboard.readText().then((text) => { console.log("클립보드에서 가져온 텍스트:", text); }).catch((error) => { console.error("읽기 중 오류 발생:", error); });
5. 권한 관리
   Clipboard API는 보안상의 이유로 HTTPS 환경에서만 동작하며, 사용자 동의가 필요합니다. 따라서 권한을 확인하는 코드를 작성해야 합니다.

---

3. React에서 Clipboard API 구현하기

React에서는 Clipboard API를 활용해 클립보드 작업을 처리할 수 있습니다. 이를 위해 예제를 통해 간단한 복사 및 붙여넣기 기능을 구현해 보겠습니다.

3.1 텍스트 복사 기능 구현

아래 코드는 사용자가 입력한 텍스트를 클립보드에 복사하는 기능을 제공합니다.

import React, { useState } from "react";

const CopyToClipboard = () => {
    const [text, setText] = useState("");
    const [message, setMessage] = useState("");

    const handleCopy = () => {
        navigator.clipboard.writeText(text).then(() => {
            setMessage("텍스트가 클립보드에 복사되었습니다!");
        }).catch((error) => {
            setMessage("복사 실패: " + error.message);
        });
    };

    return (
        <div>
            <h1>클립보드 복사 기능</h1>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="복사할 텍스트를 입력하세요"
            />
            <button onClick={handleCopy}>복사</button>
            {message && <p>{message}</p>}
        </div>
    );
};

export default CopyToClipboard;

3.2 클립보드에서 텍스트 읽어오기

이번에는 클립보드에서 텍스트를 읽어와 화면에 표시하는 기능을 구현합니다.

import React, { useState } from "react";

const ReadFromClipboard = () => {
    const [clipboardText, setClipboardText] = useState("");

    const handleRead = () => {
        navigator.clipboard.readText().then((text) => {
            setClipboardText(text);
        }).catch((error) => {
            setClipboardText("클립보드 읽기 실패: " + error.message);
        });
    };

    return (
        <div>
            <h1>클립보드 읽기 기능</h1>
            <button onClick={handleRead}>클립보드에서 텍스트 읽기</button>
            {clipboardText && <p>읽어온 텍스트: {clipboardText}</p>}
        </div>
    );
};

export default ReadFromClipboard;

---

4. 실전 활용: 복사 및 읽기 통합 예제

두 기능을 하나의 컴포넌트로 통합하여 더 복잡한 작업을 처리할 수 있습니다. 아래는 복사와 읽기 기능을 하나의 UI에서 구현한 예제입니다.

import React, { useState } from "react";

const ClipboardExample = () => {
    const [inputText, setInputText] = useState("");
    const [clipboardText, setClipboardText] = useState("");

    const copyToClipboard = () => {
        navigator.clipboard.writeText(inputText).then(() => {
            alert("텍스트가 복사되었습니다!");
        }).catch((error) => {
            alert("복사 실패: " + error.message);
        });
    };

    const readFromClipboard = () => {
        navigator.clipboard.readText().then((text) => {
            setClipboardText(text);
        }).catch((error) => {
            alert("읽기 실패: " + error.message);
        });
    };

    return (
        <div>
            <h1>Clipboard API 통합 예제</h1>
            <div>
                <input
                    type="text"
                    value={inputText}
                    onChange={(e) => setInputText(e.target.value)}
                    placeholder="복사할 텍스트를 입력하세요"
                />
                <button onClick={copyToClipboard}>텍스트 복사</button>
            </div>
            <div>
                <button onClick={readFromClipboard}>클립보드에서 텍스트 읽기</button>
                {clipboardText && <p>읽어온 텍스트: {clipboardText}</p>}
            </div>
        </div>
    );
};

export default ClipboardExample;

---

5. Clipboard API 사용 시 주의점

1. HTTPS 환경 필수
   Clipboard API는 HTTPS 환경에서만 동작합니다. 로컬 개발에서는 localhost를 예외로 허용합니다.
2. 권한 확인
   사용자의 클립보드 접근 권한이 필요합니다. 따라서 Permissions API를 사용해 권한 상태를 확인하는 것이 좋습니다.
3. navigator.permissions.query({ name: "clipboard-read" }).then((result) => { if (result.state === "granted" || result.state === "prompt") { console.log("클립보드 읽기 권한 허용됨"); } else { console.log("클립보드 읽기 권한 거부됨"); } });
4. 보안 및 프라이버시
   클립보드는 민감한 정보를 포함할 수 있으므로, 사용자 데이터를 안전하게 처리해야 합니다.

---

6. 마무리

Clipboard API는 React 애플리케이션에서 클립보드 작업을 간단하게 처리할 수 있는 강력한 도구입니다. 위의 예제 코드를 활용하면 사용자 경험을 향상시키는 다양한 기능을 구현할 수 있습니다.
이제 Clipboard API를 활용하여 더 직관적이고 편리한 React 애플리케이션을 만들어 보세요!