리액트(React) 드롭다운 메뉴 구현

드롭다운 메뉴 간단하게 구현 해보았다. 참고로 아이콘은 react-icons를 사용하였다.

구현 방법

TSX

import React, { useState } from 'react';
import { IoIosArrowUp, IoIosArrowDown } from 'react-icons/io';
import styles from './dropdown.module.css';

const Dropdown = () => {
  const sortData = [
    '좋아요많은순',
    '신상품순',
    '낮은가격순',
    '높은가격순',
    '높은할인순',
    '낮은할인순',
  ];

  const [dropdownView, setDropdownView] = useState<boolean>(false);
  const [selectedMenu, setSelectedMenu] = useState<string>(sortData[0]);

  const handleClickDropdown = () => {
    setDropdownView(!dropdownView);
  };

  const handleClickMenu = (menu: string) => {
    setSelectedMenu(menu);
    setDropdownView(!dropdownView);
  };

  return (
    <div className={styles.container}>
      <label onClick={handleClickDropdown}>
        <div className={styles.selected_menu}>
          {selectedMenu}
          {dropdownView ? <IoIosArrowUp /> : <IoIosArrowDown />}
        </div>
      </label>
      {dropdownView && (
        <ul className={styles.content}>
          {sortData.map((data) => (
            <li key={data} onClick={() => handleClickMenu(data)}>
              {data}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Dropdown;

CSS

.container {
  width: 13.4rem;
  font-size: 1.3rem;
  color: #686868;
  z-index: 1;
}

.selected_menu {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 1rem;
  border: 1px solid #d4d4d4;
}

.content {
  padding: 0.5rem 0;
  border: 1px solid #d4d4d4;
  border-top: none;
  background-color: #000000;
}

.content > li {
  padding: 1.2rem 1rem;
}

.content > li:hover {
  background-color: #e4e4e4;
}

설명

드롭다운 컨테이너를 클릭하면 dropdownView state를 boolean값을 바꿔주고, 메뉴들을 보여준다.
그리고 메뉴를 클릭하면 dropdownView state다시 바꿔줘서 숨겨주면 아주 간단하게 구현이 가능하다.