[React Native] 02-4 컴포넌트의 이벤트 속성 이해하기

버튼을 누르면 대화상자가 나타나는 기능 구현하기

---

버튼 컴포넌트

import react from 'react';
import {SafeAreaView, Alert, Button} from 'react-native';

export default function App() {
  return (
    <SafeAreaView>
      <Button
        title="Home"
        onPress={() => Alert.alert('home pressed.', 'message')}
      />
    </SafeAreaView>
  );
}

• Button 코어 컴포넌트는 onPress 속성을 제공한다. ➡️ 콜백 함수를 지정해야 함.
  • <Button onPress = {콜백_함수}>
    • 콜백 함수의 형태 : () => {/* 함수 몸통 */}
• 리액트 네이티브는 Alert API (Application Programming Interface) 를 제공한다.
  • Alert API 가 제공하는 alert 정적 메서드 : static alert(타이틀, 메시지)
  • 위의 코드에서 onPress={() => Alert.alert('home pressed.', 'message')} 는 아래 이미지와 같이 나타난다.

 

---

터처블 코어 컴포넌트

• Button 의 디자인에 융통성이 없다는 단점을 보완하기 위해 터처블 코어 컴포넌트를 사용할 수 있다.

특징

1) 컴포넌트 영어에 터치가 일어나면 onPress 이벤트 속성에 설정된 이벤트 핸들러 콜백 함수를 호출한다.

2) 단 한 개의 자식 컴포넌트만 올 수 있다.

 

TouchableOpacity 를 사용하여 Text 컴포넌트를 Button 처럼 동작하게 하는 예

import react from 'react';
import {SafeAreaView, Alert, Button} from 'react-native';
import {TouchableOpacity, TouchableHighlight, Text} from 'react-native';

const onPress = () => Alert.alert('home pressed.', 'message');

export default function App() {
  return (
    <SafeAreaView>
      <Button title="home" onPress={onPress} />
      <TouchableOpacity onPress={onPress}>
        <Text>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableHighlight onPress={onPress}>
        <Text>TouchableHighlight</Text>
      </TouchableHighlight>
    </SafeAreaView>
  );
}

✅ Text 컴포넌트도 onPress 속성을 이용해서 버튼처럼 사용할 수 있다. ➡️ Button 과 터처블 컴포넌트와 달리 터치했을 때 시각 효과가 전혀 없음.

ex) <Text onpress={onPress}>Press Me</Text>

---

 

TextInput 코어 컴포넌트

import {TextInput} from 'react-native'

• 텍스트를 입력하고자 할 때 TextInput 코어 컴포넌트를 사용한다.

특징

1) 자식 요소를 가지지 못한다.

2) 포커스를 가지게 하는 focus 메서드와 포커스를 잃게 하는 blur 메서드가 있다.

3) 텍스트가 입력될 때 onChangeText 이벤트 처리기를 실행한다.

4) 텍스트 입력이 모두 끝나면 onEndEditing 이벤트를 호출한다.

✅ onFocus, onBlur, onEndEditing 에는 아무런 매개변수가 없는 콜백 함수를 설정한다.

 

 

Text와 TextInput 을 추가한 App.tsx

import react from 'react';
import {SafeAreaView, Alert, Button, TextInput} from 'react-native';
import {TouchableOpacity, TouchableHighlight, Text} from 'react-native';

const onPress = () => Alert.alert('home pressed.', 'message');

export default function App() {
  return (
    <SafeAreaView>
      <Button title="home" onPress={onPress} />
      <TouchableOpacity onPress={onPress}>
        <Text>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableHighlight onPress={onPress}>
        <Text>TouchableHighlight</Text>
      </TouchableHighlight>
      <TextInput
        placeholder="enter your name"
        onChangeText={(text: string) => console.log(text)}
        onFocus={() => console.log('onFocus')}
        onBlur={() => console.log('onBlur')}
        onEndEditing={() => console.log('onEndEditing')}
      />
    </SafeAreaView>
  );
}