Custom Hook을 활용한 마우스 제스처 인식

06 Nov 2023

customhook

마우스 제스처 인식은 사용자 인터페이스(UI)에서 자주 사용되는 기능 중 하나입니다. 사용자가 마우스로 다양한 동작을 수행할 때, 해당 동작을 인식하고 적절한 액션을 수행할 수 있도록 도와줍니다.

React에서는 Custom Hook을 활용하여 마우스 제스처를 인식하는 기능을 구현할 수 있습니다. Custom Hook을 이용하면, 마우스 동작을 감지하고 처리하는 로직을 간편하게 재사용할 수 있습니다.

Custom Hook 구현하기

먼저, useMouseGesture라는 Custom Hook을 구현해보겠습니다. 이 Hook은 마우스 제스처를 인식하고 해당 동작을 콜백 함수로 전달하는 기능을 제공할 것입니다.

import { useState, useEffect } from 'react';

const useMouseGesture = (callback) => {
  const [startX, setStartX] = useState(0);
  const [startY, setStartY] = useState(0);
  const [endX, setEndX] = useState(0);
  const [endY, setEndY] = useState(0);

  useEffect(() => {
    const handleMouseDown = (event) => {
      setStartX(event.clientX);
      setStartY(event.clientY);
    };

    const handleMouseUp = (event) => {
      setEndX(event.clientX);
      setEndY(event.clientY);

      // 간단한 제스처 인식 로직 예시: 오른쪽으로 드래그
      if (endX - startX > 100) {
        callback('right');
      }
    };

    document.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [callback, endX, startX]);

  return {
    startX,
    startY,
    endX,
    endY,
  };
};

export default useMouseGesture;

위의 코드에서는 마우스의 시작 위치(startX와 startY)와 끝 위치(endX와 endY)를 useState Hook을 통해 관리하고, mousedown와 mouseup 이벤트를 이용하여 시작 위치와 끝 위치를 갱신합니다.

마우스 제스처 인식 로직은 간단한 예시로 오른쪽으로 드래그하는 동작을 인식하는 것으로 구현되어 있습니다. 만약 오른쪽으로 드래그한 동작이 인식되면, 사용자가 제공한 콜백 함수에 'right'라는 인자를 전달하여 액션을 수행할 수 있도록 합니다.

Custom Hook 사용하기

이제 구현한 useMouseGesture Hook을 사용해보도록 하겠습니다. 예를 들어, 오른쪽으로 드래그한 경우에는 콘솔에 메시지를 출력하는 간단한 예제를 만들어보겠습니다.

import React from 'react';
import useMouseGesture from './useMouseGesture';

const App = () => {
  const onGesture = (direction) => {
    if (direction === 'right') {
      console.log('오른쪽으로 드래그했습니다.');
    }
  };

  useMouseGesture(onGesture);

  return <div>마우스를 드래그해보세요!</div>;
};

export default App;

위의 예제에서는 useMouseGesture Hook에 onGesture 콜백 함수를 전달하여 오른쪽으로 드래그한 경우에 메시지를 출력하도록 구현했습니다. 이제 마우스를 드래그해보면 적절한 메시지가 콘솔에 출력될 것입니다.

마무리

Custom Hook을 활용하여 마우스 제스처를 감지하고 처리하는 기능을 구현할 수 있습니다. 이를 활용하면 React 기반의 웹 애플리케이션에서 다양한 인터랙티브한 동작을 구현할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있습니다. Custom Hook을 활용하여 마우스 제스처 인식 기능을 구현해보고, 다양한 동작에 대한 처리를 추가해보세요!