[React Native] 클립보드 기능 구현하기 (expo-clipboard)

클립보드 기능 구현하기 (expo-clipboard)

들어가며

• 엑스포(Expo)를 이용하여 생성한 리액트 네이티브(React Native) 프로젝트에서 클립보드(Clipboard) 기능을 구현하는 방법을 정리해본다.

 

방법

• 간단하게 @expo-clipboard@ 패키지를 설치하여 클립보드 기능을 구현할 수 있다.

 

expo-clipboard 패키지 설치하기

$ npx expo install expo-clipboard

 

사용하기

• 클립보드에 복사할 때는 @Clipboard.setStringAsync()@ 함수를 사용하고, 클립보드에 있는(복사된) 값을 가져올 때는 @fetchCopiedText()@ 함수를 사용한다.

import { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import * as Clipboard from 'expo-clipboard';

export default function App() {
  const [copiedText, setCopiedText] = useState('');

  // 클립보드에 복사하기
  const copyToClipboard = async () => {
    await Clipboard.setStringAsync('hello world');
  };

  // 클립보드 값 가져오기
  const fetchCopiedText = async () => {
    const text =  await Clipboard.getStringAsync();
    setCopiedText(text);
  };

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  copiedText: {
    marginTop: 10,
    color: 'red',
  },
});

 

참고 사이트

Clipboard