Action intent

요번 포스팅은 복사, 붙여넣기 기능을 구현해 보도록 하겠습니다. 

이 API는 getString(), setString() 두 함수로 간단히 구현할 수 있습니다. 

1. clipboard.js를 생성하고 react-native에서 Clipboard, getString component를 import 합니다. 

2. componentDidMount 오버라이드 함수에 Clipboard.setString('HelloWorld')으로 초기 clipboard 값을 설정합니다. 

3. updateClipboard (string) 함수에서 inputText에 입력이 발생할 때 마다 Clipboard.setString(string)을 이용하여 clipboard에 입력된 텍스트를 넣어둡니다. 

4. 지난 비동기 함수 동작 방식으로 async-await를 이용하여 pushClipboardToArray() 함수에서 clipboard에 저장된 텍스트를 component state인 clipboardData 배열에 push 하도록 합니다.

*this.pushClipboardToArray = this.pushClipboardToArray.bind(this)로 async 함수를 binding하여 사용하도록 합니다. 

이제 사용자 이벤트(텍스트 입력, 클립보드 내용 저장 버튼)를 위해 render를 구성합니다. 

TextInput에서 onChangeText 이벤트가 발생하면 3번의 updateClipboard 함수가 호출 될 수 있도록 익명 함수를 설정합니다.

TouchableHighlight를 누르면 binding 시켰던 4번의 pushClipboardToArray 함수를 호출 하도록 구현합니다. 

clipboardData.map((d, i) => {
                    return <Text key={i}>{d}</Text>
                })

render 하단에 clipboardData 배열의 map을 이용하여 저장된 데이터를 출력해주는 로직입니다. 

map을 이용하면 배열 아이템 하나하나에 대해 전달된 익명 함수를 실행하게 되는데 그 인자로 저장된 데이터 d와 인덱스 i가 전달되고 Text 문을 return하여 데이터를 화면에 출력하게 됩니다. 

코드를 실행해보면 위와 같이 바로 버튼을 누르면 초기 설정값인 'HelloWorld'가 출력되고 텍스트를 입력 후 버튼을 누를때 마다 입력한 결과가 목록으로 출력되는 걸 볼 수 있습니다.