React Native - Touchable/Pressable component

button 컴포넌트는 안드로이드/ios에서 다르게 보이기때문에 관리하기 쉽게하기위해 react native에서 제공하는 사용자의 터치를 감지하는 컴포넌트를 사용한다.

import { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, Pressable } from 'react-native';

◾ Touchable component

: 터치 이벤트에 반응하여 시각적인 피드백을 제공한다.
버튼, 링크, 이미지 등과 같이 터치에 의해 동작하는 요소를 구현할 때 사용된다.
터치 시 투명도 변경, 배경색 변경, 하이라이트 효과 등 다양한 스타일 변화를 적용할 수 있다.

 

TouchableOpacity - 터치 시 activeOpacity 속성으로 투명도 조절

TouchableHightLight - 터치 시 underlayColor로 배경색 지정, acrtiveOpacity, onPress={()=>{ 실행할 함수 } }  속성 등

TouchableWithoutFeedback - 터치 시 ui 변화 없이 기능 설정

 

◾ Pressable component

: 단일 컴포넌트로서 터치 이벤트를 처리하고 시각적인 피드백을 제공한다.
스타일 커스터마이징이 용이하며, 터치 상태에 따라 스타일을 동적으로 변경할 수 있다.
버튼, 터치 가능한 컴포넌트 등에 사용되며, 복잡한 터치 상호작용을 처리할 수 있다.

 

Pressable - onPress 다양한 속성부터 터치한 시간을 감지하는 delayLongPress나 터치영역을 지정하는 hitSlop 등 보다 더 복잡한 터치 이벤트 설정

 

---

📣 간단한 터치 이벤트와 시각적인 피드백을 제공하기 위해서는 Touchable 컴포넌트를 사용하는 것이 편리하다.
하지만 복잡한 터치 상호작용이 필요하거나 터치에 따라 동적인 스타일 변경이 필요한 경우에는 Pressable 컴포넌트가 더 적합하다.