[React] 드롭다운 메뉴 만들기 (feat. useRef, useState)

오늘은 커스텀 훅을 사용해 드롭다운 메뉴를 만들어 보도록 하겠다. 드롭다운 메뉴의 종류가 여러 개 있지만 이 포스트에서는 그냥 평범하게 어떤 버튼을 클릭했을 때 아래와 같이 메뉴/옵션이 나오는 형식, 그리고 메뉴 밖을 클릭했을땐 메뉴가 닫히도록 설계를 해보겠다. 원리는 간단하다. useDetectClose 라는 커스텀 훅을 만들고 현재 상태가 열린 (isOpen) 상태라면 그에 맞게 css만 적용해주면 된다. 그럼 커스텀 훅 부터 살펴보자. hooks/useDetectCLose.js import { useEffect, useState } from "react"; const useDetectClose = (elem, initialState) => { const [isOpen, setIsOpen] = use..

2022.02.27