이벤트 다루기

개요

본문에서는 React Native에서 Button 등의 이벤트를 다루는 방법을 안내한다.

Button UI 생성하기

먼저 Button 요소를 이용하기 위해 먼저 Button을 import 해준다.

import React, {Component} from 'react';
import {Platform, StyleSheet, ..., Button} from 'react-native';

다음으로 클래스의 render() 함수를 통해 버튼 요소를 추가한다.

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
 
  render() {
    return (
      <View style={styles.container}>
        <Button title={'로그인'}></Button>
      </View>
    );
  }
}

이벤트 리스너 추가하기

Button 요소가 터치 이벤트를 받을 수 있도록 onPress 이벤트를 등록해 준다.

<View style={styles.container}>
  <Button onPress={this._onPressLoginButton} title={'로그인'}></Button>
</View>

이제 버튼을 터치한 경우 App 클래스의 _onPressLoginButton 함수를 호출하게 된다.

이제 App 클래스에 _onPressLoginButton 함수를 정의한다.

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
  }
 
  _onPressLoginButton() {
    Alert.alert('버튼이 눌렸습니다.');
  }
}

앱을 리로드하면 정상 동작하는 것을 확인 할 수 있다.

그럼 이벤트 호출 시 특정 파라미터를 넘기려면 어떻게 해야 할까?

이벤트 리스너에서 데이터 다루기

위 예제는 단순히 정적 텍스트만을 출력하는 내용이며, 실제 프로젝트에서 이벤트를 다루기 위해서는 이벤트와 함께 다양한 데이터를 다룰 수 있어야 한다.

아래에서는 로그인을 위해 사용자 ID를 입력하고 버튼을 터치한 경우 해당 ID를 확인하는 로직을 다룬다.

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
 
  _onPressLoginButton(e) {
    Alert.alert(this.state.username);
  }
 
  render() {
    return (
      <View style={styles.container}>
        <TextInput placeholder={'사용자 ID'} multiline={false} onChangeText={(text) => this.setState({username: text})} value={this.state.username}></TextInput>
        <Button onPress={this._onPressLoginButton.bind(this)} title={'로그인'}></Button>
      </View>
    );
  }
}

주의해야 할 사항은 클래스 Context를 사용 할 수 있도록 꼭 bind 함수를 이용해야 한다는 것이다.

위와 같은 코드를 작성한 뒤 리로드하면 다음과 같은 동작 결과를 확인 할 수 있다.

파라미터를 이벤트 콜백으로 넘기기

특정 파라미터를 콜백으로 넘기려면 아래와 같이 코드를 작성하면 된다.

(두 코드는 모두 같은 동작을 한다.)

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

두 번째 방법의 경우 event 파라미터인 `e`는 id의 뒤에 자동으로 추가된다.

---

강윤구 / 대표

Yungu Kang / CEO

yungu@userinsight.co.kr