코드 스니펫, URL 링크, 텍스트 조각 등 정보를 수동으로 복사하는 작업은 특히 화면이 작은 모바일 기기에서 시간이 오래 걸리고 오류가 발생하기 쉽습니다. 클립보드에 복사하기 기능을 추가하면 시간을 절약할 수 있을 뿐만 아니라 오류와 오타의 가능성도 줄일 수 있습니다.
클립보드에 복사 기능 설정하기
복사라는 행위로 애플리케이션 내에서 지정된 텍스트를 사용자의 클립보드로 전송할 수 있는 기능을 제공하는 “CopyButton”이라는 새로운 React 컴포넌트를 개발해 주세요.
작업을 수행할 기존 React 프로젝트가 없는 경우, 필요한 인프라와 기본 요소를 제공하여 새로운 프로젝트를 생성하기 위해 “create react app” 유틸리티의 서비스를 사용하는 것이 좋습니다.
function CopyButton({text}) {
const copyToClipboard = () => {
// copy to clipboard
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}
export default CopyButton
활성화되면 이 요소는 텍스트의 내용을 사용자의 클립보드로 전송하는 “copyToClipboard”라는 이름의 프로시저 실행을 트리거하기 위한 것입니다.
복사 기능을 통합하기 위해 클립보드 API를 직접 활용하거나 쉽게 사용할 수 있는 npm 패키지를 사용할 수 있습니다.
이 매뉴얼에서는 두 가지 기술을 모두 활용하는 방법에 대한 지침을 제공합니다.
클립보드 API를 사용하여 React에서 클립보드에 텍스트 복사하기
클립보드 API 는 복사, 잘라내기, 붙여넣기와 같은 클립보드 명령과 상호 작용하는 방법을 제공합니다.
이 기능을 활용하려면 많은 최신 웹 브라우징 애플리케이션에서 널리 사용되는 브라우저의 navigator.clipboard 객체를 사용해야 합니다. 이 객체는 클립보드에 저장된 데이터의 비문과 열람을 모두 가능하게 하는 일련의 기능을 자랑합니다.
시스템 클립보드에 텍스트를 새기려면 “writeText” 메서드를 활용하세요.
CopyButton 컴포넌트의 copyToClipboard 메서드 내에 이 기능을 통합하는 프로세스를 살펴볼까요?
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard:', text);
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
`writeText` 메서드는 시스템의 클립보드로 전송할 텍스트 콘텐츠 제공을 용이하게 합니다. 비동기 작업으로, 더 진행하기 전에 `await` 키워드를 사용해야 합니다.
클립보드에 텍스트 복사에 성공하면 “성공 메시지”가 표시됩니다. 반대로 ‘오류 메시지’는 ‘경고’ 형태로 표시됩니다.
브라우저 권한 확인 중
사용자가 브라우저에서 클립보드에 액세스할 수 있는 권한을 부여했는지 확인하여 모범 사례를 따르는 것이 중요합니다.사용자가 클립보드 쓰기 권한을 부여했는지 확인하려면 아래 제공된 코드 스니펫에 표시된 것처럼 `navigator.permissions` 웹 API를 활용하여 클립보드 작업을 수행하기 전에 확인을 수행할 수 있습니다.
const copyToClipboard = async () => {
try {
const permissions = await navigator.permissions.query({name: "clipboard-write"})
if (permissions.state === "granted" || permissions.state === "prompt") {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard!');
} else {
throw new Error("Can't access the clipboard. Check your browser permissions.")
}
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
앞서 언급한 기능은 클립보드에 데이터를 쓰기 전에 사용자가 클립보드에 액세스할 수 있는 권한이 필요합니다. 이러한 승인을 얻지 못하면 작업이 중단되고 예외가 발생합니다.
React에서 NPM 패키지를 사용하여 클립보드에 복사하기
클립보드 API를 직접 사용하고 싶지 않은 경우 대신 사용할 수 있는 여러 NPM 패키지가 있습니다. 리액트 애플리케이션의 경우 react-copy-to-clipboard 패키지를 사용할 수 있습니다. 주간 다운로드 수가 100만 건이 넘는 인기 있는 패키지이며 사용 방법도 간단합니다.
이 기능을 React 프로젝트에 통합하려면 터미널 인터페이스를 통해 후속 명령을 실행할 수 있습니다:
npm install react-copy-to-clipboard
React 내에 CopyToClipboard 모듈을 통합할 때, 원활한 작동을 위해 이 기능을 CopyButton 컴포넌트에 통합하는 것이 필수적입니다.
import {CopyToClipboard} from 'react-copy-to-clipboard';
CopyToClipboard 컴포넌트는 “소품”이라고 하는 특정 콘텐츠와 상호작용 시 원하는 동작을 시작하는 추가 하위 요소를 받아들여 텍스트를 복사하는 프로세스를 용이하게 하도록 설계되었습니다.
물론입니다! 다음은 JavaScript와 HTML/CSS를 사용하여 이 기능을 구현하는 방법의 예시입니다: “`html