[React Native] event

React Native에서는 다양한 이벤트를 제공한다. 그중 많이 사용되는 이벤트 몇 가지만 알아보자.

 

아래 Button 컴포넌트 글을 참고해서 작성했다.

2021.09.04 - [React Native] - [React Native] Button Component

[React Native] Button Component

1. Press 이벤트

버튼에서 많이 사용된다.

TouchableOpacity 컴포넌트에서 설정할 수 있는 Press 이벤트의 종류는 총 4가지이다.

• onPressIn : 터치가 시작될 때 항상 호출
• onPressOut : 터치가 해제될 때 항상 호출
• onPress : 터치가 해제될 때 onPressOut 이후 호출
• onLongPress : 터치가 일정 시간 이상 지속되면 호출

• 버튼을 클릭하면 : onPressIn -> onPressOut -> onPress
• 버튼을 길게 클릭하면 : onPressIn -> onLongPress -> onPressOut

만약 onLongPress가 호출되는 시간을 조절하고 싶다면 delayLongPress 값을 조절하면 된다.

default 값은 500 ms이다. 1000이면 1초

 

예시 코드)

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const Event = () => {
  const _onPressIn = () => console.log('on Press in');
  const _onPressOut = () => console.log('on press out');
  const _onPress = () => console.log('on press');
  const _onLongPress = () => console.log('on long press');
  
  return (
    <TouchableOpacity
      style={{ backgroundColor: '#e3c2fc' }}
      onPressIn={_onPressIn}
      onPressOut={_onPressOut}
      onPress={_onPress}
      onLongPress={_onLongPress}
      delayLongPress={1000}
    >
      <Text>Press</Text>
    </TouchableOpacity>
  );
};

export default Event;

2. Change 이벤트

TextInput 컴포넌트에서 많이 사용된다.

TextInput 컴포넌트는 아래 링크를 확인하자

https://reactnative.dev/docs/textinput

TextInput · React Native

onChange 속성 사용하기

예시 코드)

import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';

const EventInput = () => {
  const [text, setText] = useState('');
  const _onChange = (event) => {
    setText(event.nativeEvent.text);
   };

  return (
    <View>
      <Text>text: {text}</Text>
      <TextInput
        style={{ borderWidth: 1, padding: 10 }}
        onChange={_onChange}
      />
    </View>
  );
};

export default EventInput;

onChange 속성 : TextInput 컴포넌트에 입력된 텍스트가 변경될 때 호출된다. 그리고 호출되는 함수에 다음과 같은 형태로 인자를 전달한다. 

{ nativeEvent: { eventCount, target, text} }

변화된 텍스트를 출력하기 위해서 event.nativeEvent.text를 setText 함수에 전달하고 변화된 텍스트를 text 상태에 저장한다. 

하지만 onChange를 통해 전달되는 내용 중 실제로 필요한 것은 변화된 텍스트뿐이다. 그럴 땐 onChangeText를 사용하자.

 

onChangeText 속성 사용하기

컴포넌트의 텍스트가 변경되었을 때 변경된 텍스트의 문자열만 인수로 전달하며 호출된다. 

const EventInput = () => {
  const [text, setText] = useState('');
  const _onChangeText = (text) => {
    setText(text);
  };

  return (
    <View>
      <Text>text: {text}</Text>
      <TextInput
        style={{ borderWidth: 1, padding: 10 }}
        onChangeText={_onChangeText}
      />
    </View>
  );
};