[React] 리액트로 드롭다운 메뉴 만들기! - onBlur를 이용한 사용성 향상!

드롭다운 메뉴

이번에는 위의 이미지에서 보이는 펼침/닫힘만 되는 간단한 드롭다운 메뉴를 작업해 보았습니다.
onClick 이벤트와 useState를 활용하면 간단하고 쉽게 작업을 할 수 있습니다.
하지만 여기서 중요한 부분은 드롭다운 메뉴가 오픈 상태에서 다른 공간 또는 메뉴를 클릭하면 드롭다운이 닫혀야 한다는 것 입니다.
그러기 위해서는 onBlur 이벤트를 활용해야합니다.

onBlur

onBlur 이벤트는 엘리먼트 또는 자식 엘리먼트에서 포커스가 사라졌을 때 호출됩니다.

<input onBlur={() => console.log('blur!!')}

예를 들면 위의 input 바깥의 영역을 클릭해서 포커스카 아웃이 되면 콘솔 창에 'blur!!!'가 찍히게 됩니다.

코드구성

Container.jsx

const Container = () => {
  const [isDropdownView, setDropdownView] = useState(false)

  const handleClickContainer = () => {
    setDropdownView(!isDropdownView)
  }

  const handleBlurContainer = () => {
    setTimeout(() => {
      setDropdownView(false)
    }, 200);
  }

  return (
    <div className="container" onBlur={handleBlurContainer}>
      <label onClick={handleClickContainer}>
        <button>Dropdown Menu{isDropdownView ? '▲' : '▼'}</button>
      </label>
      {isDropdownView && <Dropdown /> }
    </div>
  )
}

Dropdown.jsx

<ul >
  {
    Array(3).fill('').map((li, i) => (
      <li onClick={() => console.log(`Dropdown${i + 1}`)}>Dropdown{i + 1}</li>
    ))
  }
</ul>

메뉴가 클릭이 안될 때 해결 방법

onBlur 이벤트는 포커스가 아웃이 되면 호출이 되기 때문에 blur 이벤트로 드롭다운 메뉴가 클릭이 되지 않는 문제가 있습니다.
이 경우에는 간단하게 해결하는 방법으로 setTimeout 메서드를 이용하면 됩니다.
setTimeout으로 드롭다운 메뉴 닫는 것을 살짝 딜레이 시켜줌으로 간단하게 해결이 됩니다.