Pressable vs. Touchable in React Native

원문 출처: MahYar님의 medium 글

React Native 0.63은 새로운 구성 요소인 Pressable을 도입했습니다.

Pressable 컴포넌트는 자식 구성 요소에서 서로 다른 프레스 상호 작용 단계를 감지하는 핵심 컴포넌트입니다.
Touchable 컴포넌트는 하위 구성 요소에 대한 접촉에 반응하는 컴포넌트입니다.

Pressable와 Touchable 컴포넌트는 매우 유사하게 보입니다.
텍스트나 이미지를 클릭할 수 있게 만들고, 사용자와 상호작용을 하는 기본 기능은 동일합니다.

Touchable 컴포넌트

Touchable 컴포넌트는

1. 플랫폼 상호 작용을 충족하지 않는 스타일과 효과를 포함합니다.
2. 서로 다른 플랫폼에서 high-quality 고품질의 상호 작용 경험을 지원하지 않습니다.

Touchable 컴포넌트에는 아래와 같은 종류가 있습니다.

1. Button
2. TouchableWithoutFeedback
3. TouchableHighlight
4. TouchableOpacity
5. TouchableNativeFeedback

Pressable 컴포넌트

Pressable 컴포넌트는

1. 다양한 유형의 상호작용을 감지합니다.
2. API는 현재 상호 작용 상태에 대한 직접적인 access 권한을 제공합니다.
3. 이 기능은 hover, blur, focus 등으로 확장될 수 있습니다.

뿐만 아니라 Pressable 컴포넌트는 다음과 같은 새로운 props와 멋진 기능이 포함되어 있습니다.

1. delayLongPress : LongPress의 시간이 호출될 때까지의 밀리초 단위의 시간입니다.
2. hitSlop : press를 감지할 수 있는 요소 외부의 추가적인 거리를 설정합니다.
3. onLongPress : PressIn 이후의 시간이 500밀리초 이상 지속되면 호출됩니다.
4. pressRetentionOffset : Press Out이 작동되기 전에 터치가 press로 간주되는 view 외부의 추가적인 거리입니다.
5. android_disableSound : 안드로이드에서, true일 때 Android 시스템 사운드를 press 상태에서 재생하지 않습니다.
6. android_ripple : 안드로이드에서, Android 파급 효과를 활성화하고 해당 속성을 구성합니다.

정리하자면,

React Native 공식 문서에 따르면 Pressable 컴포넌트는 Touchable 컴포넌트보다 선호됩니다.
Pressable 컴포넌트는 터치 기반 압력을 보다 광범위하고 미래 대비적으로 처리할 수 있는 방법을 제공합니다.

Pressable 컴포넌트는 Touchable 컴포넌트를 교체하기 위한 것입니다.
이제는 Pressable 컴포넌트를 사용해야합니다.