개발새발 로그

📖들어가며..이번에는 리액트로 Tooltip을 구현해보려고 한다. 간혹 프로젝트에서 tooltip을 사용하곤 하는데hover일 때와 click일 때를 구분해서 사용하기도 한다. click일 때는 조건으로 내부 요소에서 클릭이 가능하게 해야한다.즉 내부 클릭시 tooltip이 닫히면 안된다.또한 외부 클릭시 닫혀야할 것이다. 그리고 tooltip이 만약 viewport에 넘어가 보이지 않을 경우에 자동으로 위치를 변경해주는 기능도 추가해보려고 한다.만약 기본 값이 "left" 일 때 viewport의 가로가 좁혀질 경우 "right"로 바뀌는 것이다. 나는 styled-component를 사용하고 있어서 tooltip이 보이는 상태가 간단히 구현될 것이다. 🛠️Tooltip 컴포넌트 구현하기먼저 구현하..

📖들어가며...개인 프로젝트로 Tooltip 기능을 구현하던 중 만난 상황에 대해서 정리해보려고 한다.정말 간단한 문제인데 자칫하면 실수할 법한 상황이라 공유하면 좋을 것 같다는 생각이 들었다. 먼저 나는 Tootip이 click, focus, hover 기능이 한 컴포넌트에서 모두 기능할 수 있도록 구현하려고 했다.그래서 아래와 같은 코드가 작성되었다.이렇게 등록해서 click, focus, hover 모두 가능하게 하려고 했다. click은 따로 window.addEventListener로 click된 tooltip이 닫히도록 했다.이때 click에서 예외 상황이 발생할 수 있다.만약 click으로 tooltip이 나오는 경우 tooltip 내부 요소를 클릭했을 때는 tooltip이 닫혀서는 안된다..