많은 모바일 애플리케이션에서 사용되는 터치 제스처 인식 기능은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 이번 글에서는 React Native에서 Custom Hook을 이용하여 터치 제스처를 감지하고 인식하는 기능을 추가하는 방법을 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React 함수 컴포넌트에서 상태 관리나 부가적인 기능을 추상화하여 재사용 가능한 로직으로 분리하는 방법입니다. 이를 통해 코드의 재사용성과 가독성이 향상되며, 컴포넌트간의 로직 중복을 줄일 수 있습니다.

터치 제스처 인식을 위한 Custom Hook 구현하기

React Native에서 터치 제스처를 인식하는 기능은 PanResponder와 Animated를 이용하여 구현할 수 있습니다. 다음은 터치 제스처를 감지하는 Custom Hook의 예시입니다.

import { useState } from 'react';
import { PanResponder, Dimensions } from 'react-native';

const useTouchGesture = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handlePanResponderMove = (event, gestureState) => {
    const { dx, dy } = gestureState;
    setPosition({ x: dx, y: dy });
  };

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder: () => true,
    onPanResponderMove: handlePanResponderMove,
  });

  return { panResponder, position };
};

위 코드에서는 useState를 사용하여 현재 터치 위치를 저장하는 position 상태를 관리합니다. 그리고 handlePanResponderMove 함수에서 터치 이동 이벤트가 발생할 때마다 position 상태를 업데이트합니다.

PanResponder.create를 이용하여 panResponder 객체를 생성한 후, 이 객체를 컴포넌트의 터치 이벤트에 연결하여 터치 제스처를 감지합니다.

터치 제스처 인식 기능 사용하기

터치 제스처 인식 기능을 사용하기 위해서는 컴포넌트에서 Custom Hook을 호출하고, 반환된 position 상태와 panResponder 객체를 사용해야 합니다. 아래 예시는 터치 이동에 따라 요소를 이동시키는 컴포넌트입니다.

import React from 'react';
import { View } from 'react-native';

import useTouchGesture from './useTouchGesture';

const TouchableComponent = () => {
  const { panResponder, position } = useTouchGesture();

  return (
    <View
      { ...panResponder.panHandlers }
      style={{
        transform: [{ translateX: position.x }, { translateY: position.y }],
      }}
    >
      {/* 요소의 내용 */}
    </View>
  );
};

export default TouchableComponent;

위 코드에서 useTouchGesture Custom Hook을 호출하고 반환된 panResponder 객체의 panHandlers를 View 요소에 전달하여 터치 이벤트에 반응하게 합니다. 이 때, position 상태를 이용하여 transform 스타일을 업데이트하여 요소를 움직입니다.

마무리

Custom Hook을 이용하여 React Native에서 터치 제스처를 감지하고 인식하는 기능을 구현했습니다. 이제 이 기능을 활용하여 애플리케이션의 사용자 경험을 향상시킬 수 있을 것입니다. 참고한 내용이 있다면 링크를 확인해보세요.

#reactnative #customhook