SVG 아이콘 클릭 이벤트 핸들링

👿 Problem

1. react-icons 패키지에서 아이콘 IoIosClose를 import해서 사용함

2. 해당 아이콘에 클릭 이벤트 핸들러 handleCloseModal을 걸어주려함
• modalDim, modalClose가 ref로 걸려있는 요소를 클릭하면 Modal을 토글함

3. 아이콘 태그에 이벤트를 걸어줬는데 클릭 시 그 안의 svg, path 태그가 e.target으로 잡혀서 클릭 이벤트 핸들러가 실행이 안됐음

4. 아이콘을 감싼 div나 button 태그에 이벤트 핸들러를 걸어도 같은 현상이 발생함

😇 Solution

1. 아이콘을 클릭했을 때 가장 가까운 상위 button 요소 btn === ModalClose를 찾게함

2. btn에는 useRef로 modalClose라는 ref가 걸려있음

3. btn과 modalClose.current가 같은 대상이라면 Modal을 토글하게 하는 조건 추가함