React Native의 버튼 구현: Pressable vs TouchableOpacity

React Native의 기본 Button 컴포넌트

React Native는 기본적으로 Button 컴포넌트를 제공합니다. 하지만 이 컴포넌트는 웹 개발에서 흔히 사용 되는 button 요소와는 다소 차이가 있습니다.

<Button
	title="Press me"
	onPress={() => Alert.alert('Simple Button pressed')}
/>

 

기본 Button 컴포넌트의 주요 특징은 다음과 같습니다.

• 필수 props로 title과 onPress를 요구합니다.
• 사용자 정의 스타일링에 제한이 있습니다.
• 그나마 스타일링 할 수 있는 방법이 color prop인데, 동작 방식이 iOS와 Android에서 다르게 적용됩니다.
  • Android에서는 버튼의 배경색
  • iOS에서는 텍스트의 색상
    
    

이러한 제한으로 인해, 더 유연한 버튼 구현을 위해 다른 대안들이 필요하게 되었습니다.

React Native 공식문서(Button)를 보면 아래와 같습니다.

모든 플랫폼에서 멋지게 렌더링 되어야 하는 기본 버튼 구성 요소입니다. 최소한의 사용자 정의 수준을 지원합니다.
이 버튼이 앱에 적합하지 않은 경우 Pressable을 사용하여 직접 버튼을 빌드 할 수 있습니다.

 

Button 컴포넌트는 이건 버튼이야! 정도의 기능만 하는 정도로만 사용하면 될 것 같습니다. 우리가 원하는 방식대로 버튼을 사용하려면 공식문서에 나와 있듯이 Pressable을 사용하면 됩니다.

해결 됐나요? 😄😄

 

그렇다면, 이 둘의 차이점은 무엇일까요?

 

TouchableOpatity

TouchableOpacity는 터치 이벤트에 반응하여 불투명도를 변경함으로써 시각적 피드백을 제공하는 컴포넌트입니다.

주요 특징:

• 커스텀 스타일링이 가능합니다.
• 터치 시 자동으로 불투명도 애니메이션을 제공합니다.
• 간단한 사용법으로 빠르게 구현할 수 있습니다.

기존의 Button 컴포넌트는 스타일링을 할 수 없었지만, TouchableOpacity 부터 style prop을 사용할 수 있기 때문에 이 컴포넌트를 wrapper 로 사용 했었던 것 같죠?

버튼을 만들기 위해서 이 태그로 감싸서 커스텀 버튼을 만든 코드를 돌아다니다 보면 발견 할 수 있을 것입니다.

 

Pressable

Pressable은 React Native 0.63 버전부터 도입된 새로운 컴포넌트로, 더욱 세밀한 터치 이벤트 제어를 가능하게 합니다. 기존의 TouchableOpacity 보다 더 광범위하게 사용자 상호 작용을 처리하도록 설계되었습니다.

주요 특징:

• 다양한 터치 상태(pressed, hovered, focused 등)에 대한 세밀한 제어가 가능합니다.
• 터치 영역 및 z-index 조정이 용이합니다.
• 플랫폼 간 일관된 동작을 제공합니다.
• 성능 최적화가 개선되었습니다.

 

React Native 팀은 대부분의 경우 Pressable의 사용을 권장하고 있습니다.

모든 면에서 좋으나 단점인지는 모르겠지만 눌렀을때의 사용자에 대한 피드백도 직접 정의 해주어야 하므로 귀찮을 수 있다는 것 정도? 가 전부입니다.

 

결론

버튼 구현 시 선택 기준:

• Pressable 선택 : 세밀한 제어와 높은 커스터마이징이 필요한 경우
• TouchableOpacity 선택 : 빠른 구현과 간단한 애니메이션만으로 충분한 경우 (귀찮을 때? ㅎ)

 

 

참고자료

Guide on React Native Touchableopacity Vs Pressable