이벤트2

• 자식 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. 원인위 예제를 토대로 원인을 알아보자면, D.. Front-End/JavaScript 2024. 12. 8.

• input,label을 감싸는 div click event가 두 번 실행되는 이슈 이 글로 얻을 수 있는 정보1. Event와 CustomEvent ( + dispatchEvent )2. 합성 이벤트의 개념 3. 이벤트 발생 방식 및 순서4. input,label에서 click event가 두 번 실행되는 이슈의 해결 방법 0. 개요업무(Next.js 14, storybook 사용 중) 코드 리뷰 중 다음 예시와 같이 input과 label을 연결 후, onClick 이벤트를 넣은 div로 감싸는 마크업을 구성하게 되면 label 영역을 눌렀을 때 click event가 두 번실행되는 이슈가 발생하여 해당 이슈에 대해 알아보려고 합니다.See the Pen Untitled by 윤창현 (@ibgcsnij-the-selector) on CodePen.     1. 문제 접근 방법1-1.. Front-End/HTML,CSS 2024. 10. 21.