[RN] Pressable

React Native의 Pressable 컴포넌트와 pressed 상태에 대한 보고서

1. 개요

React Native의 Pressable 컴포넌트는 사용자의 터치 상호작용을 감지하고, 다양한 상태를 기반으로 스타일을 동적으로 변경할 수 있는 컴포넌트이다. pressed 상태는 사용자가 버튼을 누르고 있을 때(onPressIn)와 떼는 순간(onPressOut)을 감지하여 UI에 반영하는 데 사용된다.

2. Pressable의 기본 문법

<Pressable style={({ pressed }) => (pressed ? styles.pressedItem : styles.defaultItem)}>
  <Text>Press Me</Text>
</Pressable>

• style 속성은 함수 형태를 사용할 수 있으며, 이 함수의 매개변수로 pressed 상태를 받을 수 있다.
• pressed는 불리언(boolean) 값이며, 사용자가 터치하고 있을 때 true, 터치를 해제하면 false가 된다.
• pressed가 true일 때 특정 스타일을 적용하여 시각적 피드백을 제공할 수 있다.

3. pressed 상태의 동작 원리

(1) pressed의 값 변화

• 사용자가 Pressable을 터치하면 pressed = true가 된다.
• 사용자가 터치를 떼면 pressed = false가 된다.
• pressed 상태를 활용하여 스타일을 동적으로 변경할 수 있다.

(2) 내부 동작 과정

1. 사용자가 Pressable을 터치하면 onPressIn 이벤트가 발생 → pressed = true
2. 사용자가 화면에서 손을 떼면 onPressOut 이벤트가 발생 → pressed = false
3. style 속성에서 pressed 값을 감지하여 스타일을 변경

4. 예제 코드

(1) 기본적인 pressed 상태 활용 예제

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

const App = () => {
  return (
    <Pressable style={({ pressed }) => (pressed ? styles.pressedItem : styles.defaultItem)}>
      <Text>Press Me</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  defaultItem: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  pressedItem: {
    backgroundColor: 'darkblue',
  },
});

export default App;

• 사용자가 버튼을 터치하면 배경색이 darkblue로 변경된다.
• 터치를 떼면 원래 blue 색상으로 돌아간다.

(2) 추가적인 스타일 변경 (투명도 효과 적용)

<Pressable style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }, styles.button]}>
  <Text>Press Me</Text>
</Pressable>

• pressed가 true일 때 **버튼이 반투명(투명도 50%)**으로 보이도록 설정.

5. pressed 상태의 활용 사례

• 버튼을 터치하는 동안 시각적 피드백 제공 (배경색 변경, 크기 조절 등)
• 터치 시 애니메이션 효과 추가
• UI/UX 개선을 위한 반응형 디자인 적용

6. 결론

React Native의 Pressable 컴포넌트는 사용자의 터치 상태를 감지하여 pressed 값을 제공하며, 이를 활용하면 인터랙티브한 UI를 쉽게 구현할 수 있다. 이를 통해 터치 시 색상 변경, 투명도 조절 등의 효과를 줄 수 있어 사용자 경험(UX) 개선에 유용하다.