리액트 | 리액트에서 마우스 이벤트 충돌 방지하는 방법

💥 이벤트 버블링을 이용하여 마우스 이벤트 충돌 방지하기

리액트에서 마우스 이벤트 충돌을 방지하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 이벤트 버블링(Event Bubbling)을 이용하여 이벤트를 처리하는 것입니다. 이벤트 버블링을 이용하여, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되어 중복된 이벤트가 발생하지 않도록 처리할 수 있습니다.

참고 : 이벤트 버블링이란, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 말합니다.

🧑🏻‍💻 적용하기

예를 들어, 다음과 같은 코드에서는 Parent 컴포넌트와 Child 컴포넌트가 있으며, 각각 onClick 이벤트를 처리하는 함수가 정의되어 있습니다.

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

  return (
    <div onClick={handleClick}>
      <Child />
    </div>
  );
}

function Child() {
  function handleClick(event) {
    event.stopPropagation();
    console.log('Child was clicked');
  }

  return <div onClick={handleClick}>Child</div>;
}

위 코드에서 Parent 컴포넌트는 자식 요소인 Child 컴포넌트를 감싸고 있으며, 부모 요소에서 onClick 이벤트를 처리하는 함수와 자식 요소에서 onClick 이벤트를 처리하는 함수가 각각 정의되어 있습니다. 이 때, Child 컴포넌트에서 event.stopPropagation() 함수를 호출하여 이벤트 버블링을 막으면, 자식 요소에서 발생한 이벤트가 상위 요소로 전파되지 않습니다.

따라서, Parent 요소를 클릭하면 'Parent was clicked' 메시지가 콘솔에 출력되고, Child 요소를 클릭하면 'Child was clicked' 메시지가 콘솔에 출력됩니다. 이렇게 하면, 각각의 이벤트가 충돌하지 않고, 올바르게 처리됩니다. 이와 같이 이벤트 버블링을 이용하여 마우스 이벤트 충돌을 방지할 수 있습니다.

주의 : 다만, 이벤트 버블링을 막는 것이 올바르지 않은 경우도 있으므로, 상황에 맞게 사용해야 합니다.

참고 : 리액트에서 이벤트가 발생하면 해당 이벤트는 DOM 트리에서 상위 요소로 이벤트 버블링(Event Bubbling)을 통해 전파됩니다. 따라서, 부모 컴포넌트에서 이벤트를 처리하면 자식 컴포넌트에서 발생한 이벤트도 부모 컴포넌트에서 처리됩니다.