https://blog.cruru.kr/keywords/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A4%EA%B3%84/ Recent content in 컴포넌트 설계 on 팀 크루루의 개발 이야기 Hugo -- gohugo.io ko-kr Sat, 16 Nov 2024 00:37:00 +0000 https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-popovermenu-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B0%9C%EC%84%A0%EA%B8%B0-14b03c21d39b4b068b8b29e0e5de4aad/ Sat, 16 Nov 2024 00:37:00 +0000 https://blog.cruru.kr/docs/frontend/%ED%81%AC%EB%A3%A8%EB%A3%A8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-popovermenu-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B0%9C%EC%84%A0%EA%B8%B0-14b03c21d39b4b068b8b29e0e5de4aad/ 이 글은 우아한테크코스 프론트엔드 6기 러기에 의해 작성되었습니다. 1. createPortal로 구현된 PopoverMenu 이벤트 처리 문제 해결 linkReact에서 createPortal을 활용해 팝오버 메뉴(Popover Menu)를 구현할 때는, 스타일과 이벤트 처리에 대한 고려가 필요합니다. 이번 포스트에서는 기존 CSS hover를 사용하는 코드에서, React 상태(useState)로 이벤트를 관리하는 코드로의 전환 과정을 소개하고, createPortal 사용 시 발생하는 이벤트 버블링 문제 해결 방법을 다룹니다. 기존 서비스에서 Popover Menu는 특정 요소에 종속되지 않고 자유롭게 위치하도록, createPortal을 활용해 body에 렌더링했습니다. createPortal을 사용하면 overflow: hidden과 같은 부모 요소의 스타일 영향을 받지 않아, Popover Menu가 자유롭게 표시될 수 있습니다.