1. 모바일 터치 기능
component를 터치하게 하려면 웹에서는 onClick을 사용하지만 React Native에서는 터치를 할 수 있게하려면 Pressable이라는 component로 감싸야한다.
Touchable, TouchableHighlight, TouchableNativeFeedback, TouchableOpacity 등 다양한 component들이 있지만, 이전버전에서 쓰이던 것들이고 이제는 Pressable이 권장된다.
2. Pressable 사용법
터치 기능을 적용할 component를 Pressable component로 감싸주면 된다.
터치했을 때의 이벤트를 적용하기 위해서는 Pressable의 onPress에 함수를 전달해줘야한다.
const onDeleteItem = (id: string) => {
setCourseGoals((courseGoals) => courseGoals.filter((p) => p.id !== id));
};이러한 함수를 만들어준 뒤 다음과 같이 적용해주면 된다.
<Pressable onPress={() => onDeleteItem(id)}>
<View style={styles.goalItem}>
<Text style={styles.goalText}>{text}</Text>
</View>
</Pressable>3. 물결 효과 추가하기
현재 코드는 터치를 했을 때 이벤트는 정상적으로 작동하지만, 터지했을때의 스타일을 따로 추가해주지 않았기 때문에 정상적으로 클릭이 되었는지에 대한 시각적 피드백이 없다.
따라서 시각적 피드백을 주기 위해 물결 효과를 줄건데, android_ripple property를 사용해 쉽게 적용이 가능하다.
<Pressable
android_ripple={{ color: "#210644" }}
onPress={() => onDeleteItem(id)}
>
<View style={styles.goalItem}>
<Text style={styles.goalText}>{text}</Text>
</View>
</Pressable>하지만 이런식으로 하면 물결 효과가 아이템 주변에 생기기 때문에 물결 효과를 아이템 내부에 생기도록 하기 위해서는 다음과 같이 코드를 변경해야한다.
<View style={styles.goalItem}>
<Pressable
android_ripple={{ color: "#210644" }}
onPress={() => onDeleteItem(id)}
>
<Text style={styles.goalText}>{text}</Text>
</Pressable>
</View>이렇게 하면 간단히 물결 효과를 적용할 수 있다.
Android에서만...
property이름에서 알 수 있듯이 android_ripple은 android에서만 작동하는 property이다.
따라서 ios에서 물결 효과를 주기 위해서는 다른 방법이 필요한데, style property에 화살표 함수를 사용하여 조건적으로 style을 적용하여 해결할 수 있다.
styleSheet에 다음과 같은 코드를 추가한 뒤,
pressedItem: {
opacity: 0.5,
},코드를 다음과 같이 변경해주면 된다.
<View style={styles.goalItem}>
<Pressable
android_ripple={{ color: "#210644" }}
onPress={() => onDeleteItem(id)}
style={({ pressed }) => pressed && styles.pressedItem}
>
<Text style={styles.goalText}>{text}</Text>
</Pressable>
</View>style의 화살표함수에 구조분해할당을 통해 pressed property를 가져와줄 수 있으며, 해당 property는 Pressable component가 터치되었을 때 자동으로 True가 된다.
따라서 터치가 되었을때만 pressedItem style을 적용시켜 0.5의 opacity를 주는것으로 시각적 피드백을 줄 수 있게된다.
