React에서 마우스 이벤트를 듣는 방법

시작

React에서 마우스 이벤트를 듣는 것은 쉽습니다. 구성요소에 이벤트 핸들러를 추가하기만 하면 됩니다. 예를 들어, 버튼을 클릭할 때 특정 작업을 수행하려면 다음 코드를 추가하면 됩니다.

import React from 'react';

function handleClick() {
  console.log('Button clicked');
}

function App() {
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default App;

handleClick위의 코드에서는 버튼을 클릭할 때 실행될 함수를 정의했습니다 . 그런 다음 해당 기능을 버튼의 onClick속성에 전달합니다. 이는 버튼을 클릭할 때 React가 함수를 호출하도록 지시합니다.

다양한 유형의 마우스 이벤트 듣기

클릭 이벤트 외에도 React는 다른 유형의 마우스 이벤트도 지원합니다. 다음은 몇 가지 일반적인 마우스 이벤트입니다.

• onMouseDown- 마우스 버튼을 눌렀을 때 발생
• onMouseUp- 마우스 버튼을 놓으면 실행됩니다.
• onMouseMove- 마우스가 요소 위로 움직일 때 실행됩니다.
• onMouseEnter- 마우스가 요소에 들어갈 때 실행됩니다.
• onMouseLeave- 마우스가 요소를 떠날 때 실행됩니다.

이러한 이벤트를 수신하려면 클릭 이벤트와 마찬가지로 이벤트 핸들러를 추가합니다. 예를 들어, 다음 코드는 마우스가 요소에 들어갈 때 메시지를 표시합니다.

import React from 'react';

function handleMouseEnter() {
  console.log('Mouse entered');
}

function App() {
  return (
    <div onMouseEnter={handleMouseEnter}>Hover over me</div>
  );
}

export default App;

마우스 위치 가져오기

때로는 마우스 포인터의 위치를 ​​가져와야 할 수도 있습니다. event.clientX및 event.clientY속성을 사용하여 마우스 위치를 얻을 수 있습니다. 예를 들어, 다음 코드는 버튼을 클릭할 때 마우스 위치를 표시합니다.

import React from 'react';

function handleClick(event) {
  console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
}

function App() {
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default App;

결론적으로

React에서 마우스 이벤트를 듣는 것은 쉽습니다. 구성 요소에 이벤트 핸들러를 추가하고 해당 이벤트 속성을 사용하기만 하면 됩니다. 클릭 이벤트 외에도 React는 다른 유형의 마우스 이벤트도 지원합니다. 마우스 포인터의 위치를 ​​가져와야 하는 경우 event.clientX및 event.clientY속성을 사용할 수 있습니다.