리액트 드롭다운1 드롭다운 메뉴 직접 구현하기 Next.js에서 드롭다운 메뉴 구현하기🔼🔽1. Dropdown 컴포넌트 구현사용자가 드롭다운을 클릭하면 메뉴를 열고, 옵션을 선택할 수 있게 해보자! isOpen 상태로 드롭다운의 열림/닫힘을 관리하고, selectedOption으로 선택된 옵션을 관리한다.외부 클릭 시 드롭다운 닫힘useRef는 React에서 DOM 요소에 접근할 수 있게 해주는 훅이다. 드롭다운 컴포넌트의 루트 div에 ref를 연결하고, 클릭이 드롭다운 바깥에서 일어났는지 확인할 수 있다!useEffect를 통해 외부 클릭을 감지할 수 있다. mousedown 이벤트를 사용해 마우스로 클릭이 일어났을 때, 클릭이 드롭다운 메뉴 내부인지 외부인지를 감지하고, 외부라면 드롭다운을 닫는다!type DropdownProps = { .. 2025. 4. 4. 이전 1 다음
