React Native Gesture Responder System: 터치 이벤트 처리와 응답자 협상 메커니즘

<ScrollView>
  <Button onPress={handlePress} />
</ScrollView>

<DraggableCard>
  <Swipeable>
    <Button />
  </Swipeable>
</DraggableCard>

<View
  onResponderGrant={() => {
    // 터치 시작 시 하이라이트 표시
    setHighlighted(true);
  }}
  onResponderRelease={() => {
    // 터치 종료 시 하이라이트 제거
    setHighlighted(false);
  }}
  style={[styles.button, highlighted && styles.highlighted]}
>
  <Text>버튼</Text>
</View>

<View
  onResponderMove={(evt) => {
    const { locationX, locationY } = evt.nativeEvent;
    // 터치가 영역을 벗어나면 취소
    if (locationX < 0 || locationY < 0) {
      setHighlighted(false);
    }
  }}
>
  <Text>드래그로 취소 가능한 버튼</Text>
</View>

import {
  TouchableOpacity,    // 터치 시 투명도 변경
  TouchableHighlight,  // 터치 시 배경색 변경
  TouchableWithoutFeedback, // 시각적 피드백 없음
  Pressable,          // 현대적인 통합 API (권장)
} from 'react-native';
 
// 현대적 방식: Pressable 사용
<Pressable
  onPress={handlePress}
  style={({ pressed }) => [
    styles.button,
    pressed && styles.pressed
  ]}
>
  <Text>Press Me</Text>
</Pressable>

<View
  onStartShouldSetResponder={(evt) => {
    // 터치 시작 시 응답자가 될까요?
    return true;
  }}
  onMoveShouldSetResponder={(evt) => {
    // 터치가 이동할 때 응답자를 요청할까요?
    return true;
  }}
>
  <Text>터치 가능한 영역</Text>
</View>

<View
  onResponderGrant={(evt) => {
    // [권장] 응답자가 되었습니다!
    // 시각적 피드백 표시
    console.log('응답자 승인');
  }}
  onResponderReject={(evt) => {
    // [주의] 다른 컴포넌트가 응답자입니다
    console.log('응답자 거부');
  }}
>
  <Text>버튼</Text>
</View>

<View
  onResponderMove={(evt) => {
    // 터치가 이동 중
    const { locationX, locationY } = evt.nativeEvent;
    console.log('이동:', locationX, locationY);
  }}
  onResponderRelease={(evt) => {
    // 터치 종료 (touch up)
    console.log('터치 종료');
  }}
>
  <Text>드래그 가능</Text>
</View>

<View
  onResponderTerminationRequest={(evt) => {
    // 다른 컴포넌트가 응답자를 요청합니다
    // true 반환 시 응답자 양도
    return true;
  }}
  onResponderTerminate={(evt) => {
    // 응답자가 해제되었습니다
    // (다른 컴포넌트에 양도 또는 시스템 강제 해제)
    console.log('응답자 해제됨');
  }}
>
  <Text>컨텐츠</Text>
</View>

interface TouchEvent {
  nativeEvent: {
    changedTouches: Touch[];  // 변경된 터치들
    identifier: number;       // 터치 ID (멀티터치 구분)
    locationX: number;        // 컴포넌트 기준 X 좌표
    locationY: number;        // 컴포넌트 기준 Y 좌표
    pageX: number;           // 화면 기준 X 좌표
    pageY: number;           // 화면 기준 Y 좌표
    target: number;          // 이벤트 대상 노드 ID
    timestamp: number;       // 터치 시간 (속도 계산용)
    touches: Touch[];        // 현재 모든 터치들
  };
}

<View
  onResponderMove={(evt) => {
    const {
      locationX,
      locationY,
      pageX,
      pageY,
      timestamp
    } = evt.nativeEvent;
 
    // 컴포넌트 내부 좌표로 드래그 처리
    setPosition({ x: locationX, y: locationY });
 
    // 화면 전체 좌표로 전역 제스처 처리
    updateGlobalGesture({ x: pageX, y: pageY });
 
    // 속도 계산 (스와이프 제스처)
    const velocity = calculateVelocity(timestamp);
  }}
>
  <Text>드래그 가능한 요소</Text>
</View>

<View onStartShouldSetResponder={() => true}>
  {/* 부모 */}
  <View onStartShouldSetResponder={() => true}>
    {/* 자식 - 이 컴포넌트가 먼저 응답자가 됨 */}
    <Text>버튼</Text>
  </View>
</View>

<View
  onStartShouldSetResponderCapture={() => {
    // 부모가 먼저 평가됨
    return true; // 자식의 응답자 요청을 차단
  }}
>
  {/* 부모가 응답자가 됨 */}
  <View onStartShouldSetResponder={() => true}>
    {/* 자식은 응답자가 될 수 없음 */}
    <Text>버튼</Text>
  </View>
</View>

// 스와이프 컨테이너가 우선권을 가져야 함
<SwipeableRow
  onMoveShouldSetResponderCapture={(evt) => {
    const { dx } = getGesture(evt);
    // 수평 스와이프 시 응답자 획득
    return Math.abs(dx) > 10;
  }}
>
  {/* 버튼 클릭은 여전히 동작 */}
  <Button onPress={handlePress} />
</SwipeableRow>

const DraggableBox = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [dragging, setDragging] = useState(false);
 
  return (
    <View
      onStartShouldSetResponder={() => true}
      onResponderGrant={() => {
        setDragging(true);
      }}
      onResponderMove={(evt) => {
        const { pageX, pageY } = evt.nativeEvent;
        setPosition({ x: pageX, y: pageY });
      }}
      onResponderRelease={() => {
        setDragging(false);
      }}
      style={[
        styles.box,
        {
          left: position.x,
          top: position.y,
          opacity: dragging ? 0.7 : 1,
        },
      ]}
    >
      <Text>드래그하세요</Text>
    </View>
  );
};

const SwipeDetector = ({ onSwipe }) => {
  const startX = useRef(0);
 
  return (
    <View
      onStartShouldSetResponder={() => true}
      onResponderGrant={(evt) => {
        startX.current = evt.nativeEvent.pageX;
      }}
      onResponderRelease={(evt) => {
        const endX = evt.nativeEvent.pageX;
        const distance = endX - startX.current;
 
        if (distance > 100) {
          onSwipe('right');
        } else if (distance < -100) {
          onSwipe('left');
        }
      }}
    >
      <Text>좌우로 스와이프하세요</Text>
    </View>
  );
};