mouseEvent/ Drag&Drop

마우스 이벤트는 웹 애플리케이션에서 사용자의 마우스 동작을 감지하고 처리하기 위해 사용됩니다. 주요 마우스 이벤트에는 mousedown, mouseup, mousemove, click, dblclick 등이 있습니다. 이벤트를 처리하기 위해 JavaScript와 React에서 다양한 방법을 사용할 수 있습니다.

1. JavaScript에서 마우스 이벤트 처리:

   • mousedown: 마우스 버튼이 눌렸을 때 발생하는 이벤트입니다. addEventListener를 사용하여 이벤트 리스너를 등록하고, 콜백 함수를 정의하여 처리합니다.
   • mouseup: 마우스 버튼이 떼어질 때 발생하는 이벤트입니다. mousedown과 동일한 방식으로 처리합니다.
   • mousemove: 마우스가 움직일 때 발생하는 이벤트입니다. mousedown과 동일한 방식으로 처리합니다. 움직임에 따라 원하는 동작을 수행할 수 있습니다.

2. React에서 마우스 이벤트 처리:

   • JSX에서 이벤트 핸들러를 직접 작성하거나 외부 함수를 호출하여 처리할 수 있습니다.
   • 예를 들어, onMouseDown, onMouseUp, onMouseMove 등의 이벤트 속성을 컴포넌트 요소에 추가하여 마우스 이벤트를 처리할 수 있습니다.
   • 이벤트 핸들러 함수 내에서 상태 업데이트, 조건부 렌더링, API 호출 등의 작업을 수행할 수 있습니다.

예시 코드:

import React, { useState } from 'react';

const MouseExample = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    const { clientX, clientY } = event;
    setMousePosition({ x: clientX, y: clientY });
  };

  return (
    <div onMouseMove={handleMouseMove}>
      <p>Mouse Position: {mousePosition.x}, {mousePosition.y}</p>
    </div>
  );
};

export default MouseExample;

위의 예시는 React에서 onMouseMove 이벤트를 사용하여 마우스 이동을 감지하고, 이벤트 핸들러에서 마우스 위치를 상태로 업데이트하는 방법을 보여줍니다. 이를 통해 마우스의 X 및 Y 좌표를 표시하는 간단한 예제를 작성할 수 있습니다.

이와 같이 마우스 이벤트를 사용하면 사용자의 상호작용에 따라 원하는 동작을 수행할 수 있습니다.