서론
리액트 네이티브를 공부하면서 궁금한 점이 생겼다.
html은 button 태그가 있지만 RN(React Native)에서는 Pressable, Button, Touchable 같은 다양한 상호작용 감지 컴포넌트가 존재한다.
그럼 어떤 상황에 어떤 컴포넌트를 써야하는지에 대한 궁금증이 생기게 되었고,
이번 주제에서 각 컴포넌트의 특징과 차이에 대해 얘기해보자 한다.
Button
Button 컴포넌트는 onPress 같은 간단한 상호작용만 지원하고, 기본 스타일이 있다는 특징이 있다.
기본 스타일을 제공한다는 것은 iOS, Android에서 별도의 스타일링 없이 일관된 스타일을 제공한다는 장점일 수도 있지만, 간단한 상호작용과 기본 스타일 제공으로 제한된 커스터마이징이라는 것이 단점이다.
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>Touchable
Touchable 컴포넌트는 사용자의 터치 동작에 반응하고 상호작용을 하고, 시각적인 퍼포먼스를 제공하는 컴포넌트이다.
Touchable 컴포넌트는 TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback 등이 있다.
터치 동작에 반응하여 시각적인 효과를 주고싶을때 주로 사용하는 컴포넌트라고 한다.
<TouchableOpacity style={styles.button} onPress={onPress}>
<Text>Press Here</Text>
</TouchableOpacity>Pressable
Pressable 컴포넌트는 터치 동작으로 반응하면 다양한 상호작용을 할 수 있는 것이 특징이다. 또한 스타일링 또한 자유로워서 RN에서 권장하는 터치 기반 컴포넌트이다.
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.
RN 공식 문서
사진 출처
Pressable 컴포넌트는 다양한 단계에서 터치 상호작용을 할 수 있으며 감지 원리는 다음과 같다.
- onPressIn: press가 활성화되면 호출한다.
- onPressOut: press가 비활성화되면 호출한다.
- onPress: onPressOut 후 호출한다.
- onLongPress: 500ms 이상 손가락을 누르면 호출한다.
이 외에도 다양한 prop이 있으니 공식 문서에서 확인이 가능하다.
결론
react를 기본적으로 알고 RN을 시작하면 러닝커브가 낮다고 해서 괜찮을 줄 알았다.
확실히 다른 언어들보단 러닝커브가 낮다고 생각하지만 react와 다른 점이 생각보다 많기 때문에 간단한 구현이라도 많은 시간 구글링과 공식문서를 찾아보면서 시간이 지나간 것 같다.
Pressable을 처음부터 써서 프로젝트를 진행하기에 큰 문제는 없지만 Button과 Touchable 컴포넌트 간에 차이는 확실히 알고 넘어가야한다고 생각하기 때문에 이번 포스트를 작성했다.
