React 앱에 클립보드에 복사 기능을 추가하는 방법
코드 조각이나 URL, 짧은 텍스트를 일일이 복사하는 것은 번거롭고 오류가 발생하기 쉽습니다. 특히 모바일 기기처럼 작은 화면에서는 더욱 그렇습니다. '클립보드에 복사' 기능을 활용하면 시간을 절약할 수 있을 뿐만 아니라, 오타나 오류 가능성도 크게 줄일 수 있습니다.
클립보드 복사 기능 구현
React 애플리케이션에 CopyButton이라는 새로운 컴포넌트를 만들어 봅시다. 이 컴포넌트는 복사할 텍스트를 입력받습니다.
만약 작업할 React 프로젝트가 없다면, create-react-app 도구를 이용하여 새 프로젝트를 생성하세요.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}
export default CopyButton
버튼을 클릭하면 클립보드에 텍스트를 복사하는 copyToClipboard 함수를 실행해야 합니다.
이 복사 기능을 구현하는 방법은 두 가지입니다. 첫째, 클립보드 API를 직접 사용하는 방법과, 둘째, npm 패키지를 활용하는 방법입니다.
이 가이드에서는 두 가지 방법 모두를 상세하게 살펴볼 것입니다.
React에서 클립보드 API를 사용해 텍스트 복사하기
클립보드 API는 복사, 잘라내기, 붙여넣기 등 클립보드 관련 명령을 처리하는 데 사용됩니다.
대부분의 최신 브라우저에서는 navigator.clipboard 객체를 통해 이 API에 접근할 수 있습니다. 이 객체는 클립보드의 내용을 읽거나 쓸 수 있는 다양한 메서드를 제공합니다.
클립보드에 텍스트를 쓰려면 writeText 메서드를 사용합니다.
이제 CopyButton 컴포넌트의 copyToClipboard 함수에서 이를 어떻게 구현하는지 자세히 알아봅시다.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('텍스트가 클립보드에 복사되었습니다: ' + text);
} catch (error) {
alert('클립보드 복사 중 오류 발생: ' + error);
}
};
writeText 메서드는 클립보드에 복사할 텍스트를 인자로 받습니다. 이 메서드는 비동기적이므로 await 키워드를 사용하여 작업이 완료될 때까지 기다려야 합니다.
텍스트가 클립보드에 성공적으로 복사되면 성공 메시지를 표시하고, 실패하면 오류 메시지를 알림으로 표시합니다.
브라우저 권한 확인
클립보드에 접근하기 전에, 사용자가 브라우저에서 필요한 권한을 부여했는지 확인하는 것은 매우 중요합니다. navigator.permissions Web 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('텍스트가 클립보드에 복사되었습니다!');
} else {
throw new Error("클립보드 접근 권한이 없습니다. 브라우저 설정을 확인해주세요.");
}
} catch (error) {
alert('클립보드 복사 중 오류 발생: ' + error);
}
};
위의 수정된 함수에서는 사용자가 클립보드에 쓰기 권한을 부여한 경우에만 클립보드에 복사합니다. 그렇지 않으면 오류를 발생시킵니다.
React에서 NPM 패키지를 사용하여 클립보드에 복사하기
클립보드 API를 직접 사용하고 싶지 않다면, 대신 사용할 수 있는 다양한 NPM 패키지가 있습니다. React 애플리케이션에서는 react-copy-to-clipboard 패키지를 사용할 수 있습니다. 이 패키지는 주간 다운로드 수가 100만 건이 넘을 정도로 인기가 높으며, 사용하기도 매우 간편합니다.
터미널에서 다음 명령을 실행하여 React 애플리케이션에 설치합니다:
npm install react-copy-to-clipboard
설치가 완료되면 react-copy-to-clipboard에서 CopyToClipboard 컴포넌트를 CopyButton 컴포넌트로 가져옵니다.
import {CopyToClipboard} from 'react-copy-to-clipboard';
CopyToClipboard 컴포넌트는 복사할 텍스트를 props으로 받습니다. 또한, 클릭하면 복사 작업을 트리거하는 하위 컴포넌트도 허용합니다.
예를 들어, 아래 코드는 버튼을 사용하여 클립보드에 복사하는 방법을 보여줍니다.
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
onCopy 핸들러 함수에 주목하십시오. 이 함수는 text와 result 두 가지 인수를 받습니다. text는 복사된 텍스트이고, result는 복사 작업의 성공 여부를 나타내는 불리언 값입니다.
클립보드 복사 기능을 사용하는 이유는?
지금까지 클립보드 API와 react-copy-to-clipboard 패키지를 사용하여 React 애플리케이션에서 텍스트를 클립보드에 복사하는 방법을 알아보았습니다. 사용자가 텍스트를 직접 선택하고 브라우저의 복사 기능을 사용할 수도 있지만, 클릭 한 번으로 텍스트를 복사하는 기능은 사용자 경험을 더욱 편리하게 만들어줍니다.