🚩 react 메인 페이지에서 툴팁 말풍선 띄우면서 배운점 정리

[leemember]

react 메인 페이지에서 SIMPLE 서비스 툴팁 말풍선 띄우면서 배운점 정리

// 스크롤 이벤트와 클릭 이벤트 실행시 말풍선 사라지도록
useEffect(() => {
   window.addEventListener('scroll', handleScroll);
   window.addEventListener('click', handleScroll);
   return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('click', handleScroll);
   };
}, []);
 
// 스크롤, 클릭 이벤트
const handleScroll = (e) => {
   // 스크롤 시, 아무곳 클릭시 simpleTip 말풍선 사라지게
   if (window.scrollY >= 100 || onModal && (!el.current || !el.current?.contains(e.target))){
      setOnModal(false)
   }
};

useEffect를 사용해서 스크롤 이벤트랑 click 이벤트가 일어날 때 handleScroll 이라는 함수가 동작되도록 했다.
그래서 useEffect 기능내에 있는 retrun 값을 통해 cleanup 작업까지 했다. (removeEventListener == 이벤트를 지워주는)

그리고 서비스 툴팁 말풍선이 사라지는 조건은 2가지다

1. 스크롤 시
2. 아무 곳 클릭할 때

근데 작업하면서 문제점이 무엇이냐면,
메인페이지에 첫 번째로 나타나는 모달을 클릭하여 닫게 될 경우, 이벤트 버블링이 일어나서 말풍선까지 동시에 사라진다.
그래서 첫 번째로 나타나는 모달을 닫을 때에 close 되는 이벤트 쪽에다가 이벤트 버블링을 아래 메서드를 사용해서 막아주었다.

event.stopPropagation()
을 사용해주면 된다.

🐥 이벤트 버블링이란 ?

이벤트가 연속하여 발생하는 버블 현상을 의미한다.
자식 엘리먼트에서 이벤트 발생 시, 부모 엘리먼트에 같은 이벤트가 설정되어 있다면 해당 이벤트에 할당된 기능도 함께 실행된다.
그래서 이 같은 현상을 막기 위해서는 e.stopPropagation() 을 사용해서 막아주면 된다.