시작하며...이전 프로젝트에서 Menu 와 DropDown 컴포넌트를 구현하였다. 그러나 공통 컴포넌트라는 성격과 거리가 멀었다. 그래서 이번 프로젝트에서 DropDown 공통 컴포넌트를 범용성이 좋게 만들기 위해 컴파운드(Compound) 패턴으로 만들게 되었다!  컴파운드(Compound) 패턴컴파운드 패턴이란?컴파운드 패턴이란 무엇일까? 컴파운드 패턴React에서 복잡한 컴포넌트를 효율적으로 관리하고 재사용성을 높이기 위한 디자인 패턴DropDown 이나 Select 등 컴포넌트를 여러 작은 컴포넌트로 분리하여 부모/자식 관계로 이루어진 컴포넌트를 독립적이면서 통합되어 하나의 컴포넌트처럼 사용할 수 있게 만드는 디자인 패턴 중 하나이다. 장점유연성 증가가독성 증가유지보수성 증가재사용성 향상컴포넌트 ..

시작하며...메뉴바나 드롭다운의 외부영역을 클릭했을 때 닫히는 걸 구현하는 게 어려운 작업은 아닌데 이걸 구현하면서 삽질이 좀 많았다🥲 그래서 외부 영역 클릭 시 닫히는 로직에 대하여 자세히 정리해보려고 한다. 처음 구현한 방식Modal 처럼 닫히도록 구현처음에 구현한 방식은 모달(Modal)처럼 닫히도록 구현하였다. 메뉴바 뒷배경 전체화면으로 만든 후, 그 위에 메뉴바를 만드는 방식이다.const UserMenu = ({ isOpen, onClose, className }: UserMenuProps) => { const menuRef = useRef(null); const handleClickOutside = (e: MouseEvent) => { if (menuRef.current) { ..