개요
프로젝트를 진행하면서 버튼을 만들어야하거나 터치가 필요한 요소의 경우, 나는 대부분 Touchableopacity를 사용해서 만들었다.
그러나 다른 개발자분을 보니 Pressable을 사용해서 만든 것을 보고 매우 유사하게 동작하는 것 같은데 차이가 뭘까? 라는 생각을 가지게 되었다.
그래서 정리해보고자 한다.
Touchable
버튼, 링크, 이미지 등과 같이 터치에 의해 동작하는 요소를 구현할 때 사용된다.
터치 시 투명도 변경, 배경색 변경, 하이라이트 효과 등 다양한 스타일 변화를 적용할 수 있다.
내가 사용하는 것은 Touchable 컴포넌트 종류 내에 있는 TouchableOpacity이다.
Touchable 아래에는 다음과 같은 컴포넌트가 존재한다.
- Button
- TouchableWithoutFeedback
- TouchableHighlight
- TouchableOpacity
- TouchableNativeFeedback
그 중에서도 버튼을 사용하지 않는 이유는 버튼 컴포넌트는 스타일 지정 및 변경이 어렵다. 정말로 "이건 버튼이다!"라는 것만 보여줘도 상관없을 때 사용하는 것 같다.
Pressable
React Native 0.63부터 새롭게 도입된 요소로 스타일 커스터마이징이 용이하며, 터치 상태에 따라 스타일을 동적으로 변경할 수 있다.
버튼, 터치 가능한 컴포넌트 등에 사용되며, 복잡한 터치 상호작용을 처리할 수 있다.
더 최신에 나온 기술로 공식 문서는 Touchable보다 Pressable을 선호하는 것으로 보인다.
Pressable에서는 사용자와의 상호작용에 따른 더 많은 기능들이 제공되는데 그 기능들은 다음과 같다.
- delayLongPress : LongPress의 시간이 호출될 때까지의 밀리초 단위의 시간
- hitSlop : press를 감지할 수 있는 요소 외부의 추가적인 거리를 설정
- onLongPress : PressIn 이후의 시간이 500밀리초 이상 지속되면 호출
- pressRetentionOffset : Press Out이 작동되기 전에 터치가 press로 간주되는 view 외부의 추가적인 거리
이외에도 다양한 기능들이 있다.
차이점
즉 위 설명을 봤을 때, 복잡한 터치 상호작용이 있는 경우 Pressable을 사용하는 것이 더 좋다고 하는 것인데...
실제로 사용해보니 차이가 조금 있었다.
시각적 피드백
Pressable은 시각적인 피드백을 주기 위해서는 내가 모든 것을 설정해야 한다는 것이다.
TouchablOpacity를 사용했을 때는 따로 설정해주지 않아도 자동으로 버튼의 opacity가 조금 줄어들며 "내가 터치했구나"하는 피드백을 줄 수 있다.
그러나 Pressable에서는 위처럼 시각적인 피드백을 주기 위해서는 직접 설정해야하는 것이다. 자유도가 높은만큼 귀찮을 수 있다.
지연성
추가적으로 stackoverflow를 살펴보면 다음과 같이 말하는 개발자도 있다.
해석해보자면 Pressable이 이벤트가 일어났을 때 지연이 조금 더 일어나기 때문에 자신과 같이 타이밍 및 지연에 민감한 프로젝트의 경우 적합하지 않을 수 있다는 것이다.
대부분의 케이스에서는 상관없지만 더 높은 퍼포먼스가 필요한 경우에는 Pressable보다는 touchableOpacity를 사용하는 것이 더 나아보인다.
그러나 공식문서로 봤을 때 Touchable을 대체하기 위해 나온 게 Pressable처럼 보여 퍼포먼스에 크기 구애받지 않는 상황이라면 Pressable을 사용하는 것도 나쁘지 않아보인다.
