React Native | 클립보드 사용법

# React Native에서 클립보드에 복사하는 방법 소개

- 앱 개발에 있어 clipboard는 데이터 공유와 관련된 기능을 사용자에게 제공할 때 자주 이용되는 방법입니다. 본 포스팅에서는 클립보드에 데이터를 복사하는 방법에 대해서 간단히 소개하려고 합니다

 

# 깃헙 페이지

 

# 방법 소개

- 클립보드를 앱에서 사용하기 위해서는 react-native-clipboard를 설치해야 합니다.

yarn add @react-native-clipboard/clipboard
# ios는 설치 후 npx pod-install 필요!!

- 사용방법은 간단합니다. Clipboard.setString과 Clipboard.getString으로 원하는 텍스트를 가져오고 붙여넣을 수 있습니다

import React, {useState} from 'react';
import {
  View,
  TouchableOpacity,
  Text
} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

const App = () => {
  const [copiedText, setCopiedText] = useState('');

  const copyToClipboard = () => {
    Clipboard.setString('hello world');
  };

  const fetchCopiedText = async () => {
    const text = await Clipboard.getString();
    setCopiedText(text);
  };

  return (
    <View style={styles.container}>
        <TouchableOpacity onPress={copyToClipboard}>
          <Text>Click here to copy to Clipboard</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={fetchCopiedText}>
          <Text>View copied text</Text>
        </TouchableOpacity>
    </View>
  );
};

- 추가로 아래와 같이 Hooks로 사용하실수도 있습니다. 현재 클립보드에 포함된 url이나 숫자가 포함되어 있는지 확인하는 등의 기능도 제공하고 있으니, 이러한 추가 기능들이 필요하실 경우, 깃헙 페이지를 방문해보시면 좋을 것 같습니다

import React, {useEffect} from 'react';
import {Text} from 'react-native';
import {useClipboard} from '@react-native-clipboard/clipboard';

export const HooksSample = () => {
  const [data, setString] = useClipboard();

  useEffect(() => {
    setString('hello world');
  }, []);

  return <Text>{data}</Text>;
};

---