문제발생 😡

만들었던 Bar차트에서 bar가 생성된 위치에 hover 시 tooltip이 생기는 요구사항이 추가되었다.

코드 작성 전 설계 할때 bar가 그려지는 열에 mouse 이벤트가 들어오고 나가고를 잘 체크하면 될꺼라고 쉽게 생각하였다.

하지만! 마우스가 move 될때마다 onMouseEvent가 발생하며 tooltip관련 state를 초기화 하는 문제가 발생하였다.

해결방법

구조

차트의 프로젝트 구조를 간단하게 나타내면 아래의 사진과 같다

<div className={"barChart"}>
  <div className={"chartArea"}>
    <div className={"barWrapper"}/>
    <div className={"barWrapper"}/>
    <div className={"barWrapper"}/>
  </div>
  <div className={"tooltip"}>
    <div className={"barContainer"}/>
  </div>
</div>

mouseEvent(mouseMove, mouseLeave)는 barWrapper에 적용하였다.

<div className={`${styles.barWrapper}`} 
     key={`bar-wrapper-${j}`}
     onMouseMove={(e) => handleMouseMove(e, j)}
     onMouseLeave={(e) => {
     e.stopPropagation()
     setHoverIndex(-1)
                }}>

console.log()를 통해 event확인하기

barWarpper의 onMouseLeave와 tooltip을 render하는 곳에 console.log 작성하고 마우스를 움직여보다.

그 결과

위의 사진과 같은 콘솔이 찍히게되었다. 위 콘솔을 설명하면 tooltip을 띄우는 state가 조건에 만족하면 tooltip이 render되면서 focus가 뺏기게 되고 barWrapper의 mouseleave 함수가 실행되게 된다.

pointer-events : none ✅

pointer-events 는 CSS 속성으로 포인터의 이벤트의 대상이 될수 있는 경우에 설정한다.

속성 중 none은 적용된 요소의 마우스 이벤트가 무시되게 된다. 즉 barWrapper에 적용되어 있는 mosueleave 이벤트가 pointer-events 가 적용된 tooltip에서는 트리거되지 않는다.

pointer-events: none; 스타일이 적용된 경우에는 해당 요소가 마우스 이벤트를 받지 않도록 설정되어 다른 마우스 이벤트와 관련된 이슈가 발생할 수 있다.

코드에서는 특히 tooltip 요소에 pointer-events: none; 스타일이 적용되어 있다. 이로 인해 해당 요소는 마우스 이벤트를 무시하게 되므로, mouseleave 이벤트가 tooltip 요소에서는 발생하지 않는다. 이렇게 되면 마우스가 tooltip을 떠날 때 mouseleave 이벤트가 트리거되지 않고, 따라서 console.log("leave 3") 역시 출력되지 않을 것이다.

하지만,

tooltip 요소에 pointer-events: none;를 적용하는 것은 마우스 이벤트를 무시하도록 하는 것이 목적이지만, 이렇게 하면 해당 요소에서 마우스 이벤트를 처리할 수 없다.

지금 tooltip의 경우 정보를 보여주기만하여 위의 방법으로 해결을 하였지만, tooltip에 추가적인 mouseEvent가 있다면 다른 방법을 사용해야할 것 같다.

결과 😇

bar-wrapper는 barWrapper을 떠날 때 실행되고 마우스 위치의 변화에 따라 render Toolip만 실행되는 것을 볼 수 있다.

느낀점

이번 Bar Chart를 만들기전에 LineChart에도 같은 기능을 구현했었다. 마우스의 움직임을 통해 toolTip을 확인하기 전에 마우스 포인터 보다 우측으로 이동시킨뒤 움직임을 확인하여 문제점을 발견하지 못했다.

기존에 해봤던 작업이라 안일하게 생각하고 쉽게 접근했던게 이번 개발의 아쉬운점이었다. 문제를 해결한 뒤 mouseEvent에 다시 찬찬히 학습하면서 mouseEnter/MouseLeave(버블링 X), mouseOver/mouseOut(버블링 O)에 대해서 다시 한번 복습하였다.

MouseOver와 MouseEnter의 차이, 이벤트 버블링 블로그에 있는 codePen 으로 실습까지 하면서 체화하였다.

연차가 쌓일수록 비지니스 로직을 이해하고 다양한 관점에서 코딩을 작성하는게 중요하지만 위 내용과 같은 기본적인 지식 또한 놓치지 않아야 한다고 생각한다. 🫥🫥