MouseEvent의 순서에 따라 발생하는 이벤트 캡쳐링/버블링으로 인한 복잡한 로직을 개선한다

[JengYoung]

💌 설명

2가지의 일을 중점적으로 처리했습니다.

1. 이벤트 핸들러 캡쳐링/버블링에서의 의미 없는 이벤트 순서 제어 일반화

현재 mousedown, mouseup, mousemove, click, doubleclick 등 한 컴포넌트에서 신경 쓸 마우스 이벤트가 이미 5가지나 됩니다. 이때 이벤트 전파 방지나, 이벤트 버블링이 많아질 수록 이벤트에 대한 추적이 매우 어려워집니다. 따라서 의미 없는 이벤트 제어는 모두 기본 순서로 제어하도록 하였습니다. 이를 통해 의미 없이 발생하던 캡쳐링을 2개를 변경하여, 코드의 이벤트 로직을 깔끔하게 다듬었습니다. 또한 이벤트 제어를 실시했다면 그 이유를 주석을 달아놓음으로써, 차후 유지보수성을 더욱 높였습니다.

2. 리팩토링

마우스 이벤트들은 복수의 이벤트 생성으로 인해 관리가 복잡했습니다. 이때, 분명 하나로 단일적인 이벤트를 처리할 수 있겠다는 확신이 들었고, 진정 의미 있는 리팩토링을 진행했습니다. 😎

결과적으로 다음과 같은 쾌거를 이루어냈습니다.

1. 약 35%(825줄 -> 543줄, diff: -280)의 코드를 절감하고, 재사용성 높게 Updator을 리팩토링했습니다. 모든 함수들이 단일 책임에 수렴하는 깔끔한 목적을 갖고 로직을 처리합니다.
2. 이벤트 핸들러를 최적화하였습니다. 2개의 컴포넌트에서 마우스 이벤트를 등록하는 useEffect를 10개에서 3개로 줄임으로써 유지보수성을 높였고, 복수 생성이 되지 않음으로 최적화를 달성해냈습니다.

📎 관련 이슈

💡 논의해볼 사항

📝 참고자료

closes #76

⚠️ 잠깐! 한 번 체크해주세요.

• [x] 베이스가 제대로 적용되었나요?
• [x] 코드의 변경사항은 원하는 대로 잘 되었는지 다시 한 번 살펴봐요!