🔎 터치 이벤트 처리
→ React Native Expo CLI에서 Touchable 컴포넌트와 Pressable 컴포넌트는 터치 이벤트를 처리하는 데 사용되는 컴포넌트이다. 현재 프로젝트에서 Button, Text 등 터치 이벤트가 필요한 모든 컴포넌트들을 Touchable 컴포넌트로 감싸서 작업하고 있었다. 하지만 공식 문서를 확인하니 Presable 컴포넌트를 사용하는 것이 적합한 경우들이 있는 것 같아 보였다. 그래서 이번에 각각 사용이 적합한 경우, 차이점을 제대로 학습하고 일부 리팩토링까지 해보았다.
📝 Touchable 컴포넌트와 Pressable 컴포넌트
1) Touchable 컴포넌트
: 터치 이벤트에 반응하여 시각적인 피드백을 제공한다.
버튼, 링크, 이미지 등과 같이 터치에 의해 동작하는 요소를 구현할 때 사용된다.
터치 시 투명도 변경, 배경색 변경, 하이라이트 효과 등 다양한 스타일 변화를 적용할 수 있다.
2) Pressable 컴포넌트
: 단일 컴포넌트로서 터치 이벤트를 처리하고 시각적인 피드백을 제공한다.
스타일 커스터마이징이 용이하며, 터치 상태에 따라 스타일을 동적으로 변경할 수 있다.
버튼, 터치 가능한 컴포넌트 등에 사용되며, 복잡한 터치 상호작용을 처리할 수 있다.
3) Touchable 컴포넌트와 Pressable 컴포넌트의 차이점
: 간단한 터치 이벤트와 시각적인 피드백을 제공하기 위해서는 Touchable 컴포넌트를 사용하는 것이 편리하다.
하지만 복잡한 터치 상호작용이 필요하거나 터치에 따라 동적인 스타일 변경이 필요한 경우에는 Pressable 컴포넌트가 더 적합하다.
💻 터치 이벤트를 처리하는데 사용한 컴포넌트...리팩토링
//로그인 요청 함수
const signIn = async () => {
...
}
...
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.boxcolumn}>
{isLoading && (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#ED6A2C" />
</View>
)}
<View style={styles.box}>
<View style={styles.phonenumber}>
<TextInput
style={styles.inputphonenumber}
placeholder="+8201012345678"
defaultValue={phoneNumber}
onChangeText={phoneNumber => setPhoneNumber(phoneNumber)}
/>
</View>
<View style={styles.password}>
<TextInput
style={styles.passwordplaceholder}
placeholder="Password"
defaultValue={password}
onChangeText={password => setPassword(password)}
secureTextEntry
/>
</View>
//이 부분에 있어서 수정이 필요
<TouchableOpacity style={styles.signinbtn} onPress={signIn}>
<Text style={styles.signinbtnfont}>Sign In</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
);
...
→ 위와 같이 처음 작성한 코드에서 Sign In 버튼은 를 사용했다.
하지만 Sign In 버튼은 클릭 시,
1) 로딩 시 로딩 애니메이션을 보여주고
2) 로그인 API를 요청하고
3) 응답 받은 데이터를 AsyncStorage에 저장하고
4) Alert를 띄우고
5) Screen을 이동한다.
이렇게 터치 시 다양한 이벤트들이 작동하므로,
터치 이벤트에 대한 다양한 처리와 스타일 커스터마이징을 적용 가능한 이 적합한 것이다.
🔥 그 외 press 이벤트들
→ 현재는 위에 코드에서 보이는 것처럼 모두 onPress로 이벤트를 지정했지만,
onPress 외에도 여러 상황에 맞춰 호출되는 props가 더 있는 것을 확인할 수 있었다.
1) onPress : 터치가 해제된 후에 호출
2) onPressIn : 터치 되었을 때 호출
3) onPressOut : 터치가 해지 되었을 때 호출
4) onLongPress : 일정 시간(delayLongPress={2000}) 동안 터치가 지속되었을 때 호출
기획 미팅에서 이벤트가 발생하는 시점에 대해서 디테일하게 다룬 적이 없는데
이 부분에 있어서도 추후 미팅에서 다루는 것이 좋을 것 같다!
