Pressable이란 무엇인가, React Native에서의 프레스 처리

Pressable이란?

Pressable은 모든 유형의 터치를 처리하기 위한 통합 인터페이스를 제공하는 React Native 컴포넌트입니다. 세 가지 다른 Touchable 컴포넌트(TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback)와 달리 Pressable은 유연한 상태 및 스타일링 시스템으로 이를 모두 대체합니다.

이 컴포넌트는 React Native 0.63(2020년 9월)에 도입되었습니다. Meta(2026)에 따르면 React Native의 새 프로젝트 중 70%가 Touchable 컴포넌트 대신 Pressable을 사용합니다. Pressable은 Touchable의 주요 문제점인 단편화된 API와 다양한 효과를 위해 컴포넌트를 전환해야 하는 필요성을 해결합니다.

Pressable 철학

프레스 효과가 고정된(불투명도 변경) TouchableOpacity와 달리 Pressable은 현재 상태를 받는 함수를 제공합니다. 개발자는 프레스에 시각적으로 어떻게 반응할지(색상, 크기, 그림자 또는 효과 조합 변경) 결정할 수 있습니다. 이를 통해 UX를 완전히 제어할 수 있습니다.

Pressable 상태: pressed, hovered, focused

Pressable은 세 가지 상호작용 상태를 정의합니다: pressed(화면에 손가락), hovered(Web/TV에서 요소 위에 커서), focused(키보드 포커스의 요소). 각 상태는 해당 콜백을 트리거하고 스타일 함수와 자식 렌더 함수에 전달됩니다.

중요: hovered와 focused는 포인터 지원 플랫폼(Web, Android TV, Apple TV)에서만 작동합니다. 모바일 기기에서는 pressed만 사용 가능합니다. 크로스 플랫폼 애플리케이션의 경우 이 제한을 고려하여 시각적 반응을 설계하세요.

<Pressable
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed,
  ]}
  onPress={handlePress}>
  {({ pressed }) => (
    <Text style={pressed ? styles.textPressed : styles.text}>
      {pressed ? 'Release' : 'Press'}
    </Text>
  )}
</Pressable>

Pressable API 및 콜백

Pressable API는 네 가지 주요 콜백을 포함합니다: onPress(놓기를 포함한 전체 프레스), onLongPress(길게 누르기), onPressIn(터치 시작), onPressOut(터치 종료). onPressIn과 onPressOut의 조합으로 사용자 정의 애니메이션을 만들 수 있습니다.

추가 Props: delayLongPress(길게 누르기 지연, 기본값 500ms), pressRetentionOffset(프레스가 취소되는 영역), android_ripple(Android의 리플 효과). 참고: Ripple은 Android 5+에서만 작동합니다.

<Pressable
  onPress={() => console.log('눌림')}
  onLongPress={() => console.log('길게 누르기')}
  onPressIn={() => console.log('손가락 내리기')}
  onPressOut={() => console.log('손가락 올리기')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress는 pressRetentionOffset을 고려하여 컴포넌트 영역 내에서 손가락이 떼어질 때만 호출됩니다. 사용자가 손가락을 경계 밖으로 이동하면 onPress가 트리거되지 않아 잘못된 프레스를 방지합니다. onPressOut은 놓을 때 항상 호출됩니다.

hitSlop: 터치 영역 확장

hitSlop은 컴포넌트의 가시적 경계를 넘어 터치 영역을 확장하는 Pressable prop입니다. 이는 아이콘, 체크박스, 라디오 버튼과 같은 작은 요소에 중요합니다. Apple HIG는 최소 터치 대상 크기로 44×44 포인트를 권장합니다. hitSlop을 사용하면 시각적 크기를 변경하지 않고 이 요구 사항을 충족할 수 있습니다.

hitSlop은 객체 { top, bottom, left, right } 또는 모든 면에 단일 숫자를 허용합니다. 값은 논리 픽셀(dp/pt)로 지정됩니다. 24×24 아이콘의 경우 44×44 터치 대상을 달성하려면 각 면에 최소 10–12의 hitSlop이 권장됩니다.

<Pressable
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  onPress={handleIconPress}
  style={styles.iconButton}>
  <Icon name="star" size={24} />
</Pressable>

pressRetentionOffset — hitSlop의 반대: 사용자가 프레스를 취소하지 않고 컴포넌트 경계를 벗어날 수 있는 영역을 정의합니다. 기본값은 hitSlop과 같습니다. 경계를 벗어날 때 프레스를 유지해야 하는 경우 pressRetentionOffset을 늘리세요.

Pressable vs Touchable: 전환 시점

Pressable vs Touchable — 터치 처리를 위한 컴포넌트 선택 시 핵심 질문입니다. TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback은 레거시 컴포넌트로 제거되지는 않지만 새 기능을 받지 않습니다. Meta는 새 프로젝트에 Pressable을 권장합니다.

Pressable의 주요 장점: 모든 효과 유형에 대한 통합 API, 사용자 정의 스타일링을 위한 pressed 상태 액세스, hovered/focused 상태 지원, hitSlop 및 pressRetentionOffset, 추가 구성 없이 onLongPress 콜백. TouchableOpacity는 단순한 불투명도 변경에만 적합합니다.

Pressable 사용 예제

Pressable을 사용하면 최소한의 코드로 복잡한 대화형 요소를 만들 수 있습니다. 다음은 Android에서 프레스 시 크기 변경과 리플 효과가 있는 애니메이션 버튼의 예입니다. 이러한 버튼은 TouchableOpacity + Animated 조합을 대체합니다.

const AnimatedButton = ({ title, onPress }) => {
  const scale = React.useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.96,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      friction: 3,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable
      onPress={onPress}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      android_ripple={{ color: 'rgba(255,255,255,0.3)' }}
      style={styles.button}>
      <AnimatedView style={[styles.inner, { transform: [{ scale }] }]}>
        <Text style={styles.text}>{title}</Text>
      </AnimatedView>
    </Pressable>
  );
};

중요: Pressable에서 애니메이션에 useNativeDriver: true를 사용하세요. 이렇게 하면 애니메이션이 네이티브 스레드로 오프로드되어 빠른 프레스 중 프레임 드롭을 방지합니다. transform과 opacity의 네이티브 드라이버는 모든 플랫폼에서 지원됩니다.