React Native - 이벤트

React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다.

클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다.

 

이벤트, setState

https://joylee-developer.tistory.com/111

생활코딩 React 강의 (6) - 이벤트

이벤트 만들기

https://joylee-developer.tistory.com/112

생활코딩 React 강의 (7) - 컴포넌트 이벤트 만들기

 

함수형 컴포넌트를 사용한 적이 있지만, 글로 정리한 것이 없어서 여기에서는 짧게 정리하려고 한다.

 

Event

아래는 Pressable 컴포넌트에서 발생하는 이벤트의 종류이다.

대표적으로 Press와 관련된 이벤트와, onChange가 있다.

 

Press 이벤트

다양한 Press 이벤트와 관련해서 각각 다른 반응을 하도록 설정할 수 있다.

<TouchableOpacity
      onPress={() => console.log("Press")}
      onPressIn={() => console.log("In")}
      onPressOut={() => console.log("Out")}
      onLongPress={() => console.log("Long")}
>

짧게 누를 경우 : onPressIn → onPressOut → onPress

길게 누를 경우: onPressIn → onLongPress → onPressOut

순서로 이벤트가 발생하는 것을 알 수 있다.

 

 

onChange이벤트

TextInput은 입력받은 문자열의 값이 변할 때 마다 onChange이벤트가 발생한다.

<TextInput
    onChange={event => console.log(event.nativeEvent)}
    style={{borderWidth: 1, padding: 10, fontSize: 20}}
/>

onChange 이벤트에는 eventCount, target, text 가 포함되어 있다.

 

입력받은 내용만 확인하고 싶다면, console.log(event.nativeEvent.text) 로 작성하면 된다.

reactnative 공식 홈페이지에서 컴포넌트에서 제공하는 이벤트를 확인할 수 있다.