자식 Element가 있을 때 Drag&Drop Event 가 여러 번 호출 되는 이슈

0. 개요

팀 내 코드 리뷰 중 React 컴포넌트에서 Drag&Drop Event가 여러 번 호출되어 컴포넌트가 Drag&Drop Event가 호출되는 만큼 리렌더링되는 이슈가 있었습니다.

의도한 동작은 컴포넌트에 mouse over 유무에 따라 컴포넌트가 변경되는 것이었기 때문에 계속해서 리렌더링되는 이슈는 잡아야 할 필요가 있었습니다.

이 글에서는 해당 이슈에 대한 원인과 이슈를 해결하는 방법에 대해 살펴보겠습니다.

(아래 예제들은 개발자 도구를 열어 console.log를 확인하면서 테스트 해보는 게 좋습니다.)

See the Pen Drag&Drop Event Example by 윤창현 (@ibgcsnij-the-selector) on CodePen.

 

 

1. 원인

위 예제를 토대로 원인을 알아보자면, Drag 중인 상태의 포인터가 자식 컴포넌트에 접근하면 dargleave 이벤트가 발생하면서 isDragging이 false가 되고 dragenter 이벤트가 바로 실행되어 isDragging이 true <-> false로 바뀌면서 계속해서 렌더링 되는 것이었습니다.

현재는 dragenter와 dragleave 뿐이지만, dragover가 추가된다면, 리렌더링은 더 빈번하게 발생하게 될 것입니다.

 

 

2. 해결 방법

개요에서 말한 것 처럼 의도한 동작은 컴포넌트에 mouse over 유무에 따라 컴포넌트가 변경되는 것이기 때문에 drag 중인 마우스가 컴포넌트 위에 있을 때 isDragging이 false가 되어서는 안됩니다.

그렇기에 다음 예제와 같이 dragleave event의 currentTarget과 relatedTarget 을 이용해 자식 마우스가 자식 element에 위치하게 되면 dargleave 이벤트 내 로직을 실행하지 않는 방식으로 처리해 줄 수 있습니다.

See the Pen Drag&Drop Event Example by 윤창현 (@ibgcsnij-the-selector) on CodePen.

currentTarget과 relatedTarget은 각 마우스 이벤트 마다 대상이 달라지는데, dargeleave 이벤트에서는 다음과 같습니다.

draglaeve 이벤트에서의 currentTarget, relatedTarget
currentTarget: 마우스가 떠난 element
relatedTarget: 마우스가 들어가는 element

다른 마우스 이벤트에서의 currentTarget, relatedTarget이 궁금하다면 다음 링크를 참고하면 좋을 것 같습니다.

• MouseEvent: relatedTarget property

 

 

3. 마치며

원인을 알고 있다면 생각보다 어렵지 않은 문제이지만, 모른다면 나도 모르게 끊임없이 리렌더링하는 컴포넌트를 생산해낼 수 있기 때문에 실시간으로 실행될 수 있을 법한 이벤트들을 다시 한 번 점검해보는 것도 좋을 것 같습니다.