React Native에서 Pressable vs TouchableOpacity: 어떤 걸 써야 할까?

React Native로 앱을 만들다 보면 버튼이나 카드처럼 누를 수 있는 영역을 만들 때 TouchableOpacity 또는 Pressable 중 어떤 걸 써야 할지 고민될 때가 있다.

두 컴포넌트 모두 유저의 터치 입력을 감지하는 역할을 하지만, 사용 방식과 유연성에서 차이가 있다.
이 글에서는 두 컴포넌트의 차이점과 사용 시점을 정리해 본다.

---

🔸 TouchableOpacity

TouchableOpacity는 React Native 초창기부터 존재한 컴포넌트로,
사용자가 터치하면 **불투명도(opacity)**가 낮아지는 시각적 피드백을 준다.

import { TouchableOpacity, Text } from 'react-native';

<TouchableOpacity onPress={() => alert('Pressed')}>
  <Text>Click me</Text>
</TouchableOpacity>

✅ 장점

• 사용법이 매우 간단하다
• 기본적인 눌림 효과(투명도 변화)가 내장돼 있어 빠르게 UI 구성 가능

❌ 단점

• 스타일 커스터마이징이 제한적이다
• 눌림 효과는 opacity 하나뿐

---

🔸 Pressable

Pressable은 React Native 0.63부터 도입된 최신 터치 컴포넌트로,
눌림 상태에 따라 스타일을 완전히 커스터마이징할 수 있는 것이 가장 큰 특징이다.

import { Pressable, Text } from 'react-native';

<Pressable
  onPress={() => alert('Pressed')}
  style={({ pressed }) => ({
    backgroundColor: pressed ? '#eee' : '#fff',
    padding: 10,
  })}
>
  <Text>Click me</Text>
</Pressable>

✅ 장점

• pressed 상태를 이용해 배경색, 그림자, 테두리 등 다양한 스타일 변경 가능
• 눌렀을 때 외에도 onPressIn, onPressOut 등 다양한 콜백 제공

❌ 단점

• 코드가 상대적으로 길고 복잡할 수 있다
• 간단한 버튼엔 오히려 과할 수 있음

---

🆚 한눈에 비교

항목	TouchableOpacity	Pressable
도입 시기	오래됨	최신 (RN 0.63+)
눌림 효과	opacity 자동 적용	자유롭게 스타일 커스터마이징
스타일 제어	제한적	pressed로 조건부 스타일링
콜백 이벤트	기본적	onPressIn, onPressOut 등 다양
추천 사용처	간단한 터치 UI	다양한 효과가 필요한 경우

---

💡 언제 어떤 걸 써야 할까?

• ✅ 단순한 버튼, 리스트 아이템 → TouchableOpacity
• ✅ 눌렀을 때 배경색, 테두리 등 커스텀 UI 효과 → Pressable
• ✅ 최신 React Native 기준의 코드 스타일을 따르고 싶다면 → Pressable 선호

---

✍️ 마무리

React Native에서 두 컴포넌트는 결국 터치 이벤트 처리를 위한 도구지만,
개발자의 의도에 따라 적절히 선택하는 것이 중요하다.

• 빠르게 만들고 싶다면 TouchableOpacity
• 정교한 UI 피드백이 필요하면 Pressable