드롭 다운 메뉴

출처 : https://fourwingsy.medium.com/dropdown-컴포넌트-5d53820e3f4f

 

 

아래로 리스트가 나열되는 메뉴이다.

 

 

장점

1. 공간을 절약 할 수 있다.
2. 사용이 쉽다.
3. 표준이다. select와 option 태그를 사용해서 아주 쉽게 기능을 만들 수 있다.
4. 입력값이 정해져 있기 때문에 예외처리가 편하다.

 

 

단점

1. 선택지가 많아지면 피로도가 생길 수 있다. (예를 들어 생일을 선택하는 경우 12월 31일 생이면 귀찮을 것이다.)
2. 작다(?) 작아서 못 볼 수도 있을 것 같다. 그렇다고 크게 하자니 그것도 이상한 느낌을 준다.

 

 

선택지가 두개 뿐이면 toggle 형식의 버튼을 사용하는 것이 좋을 것 같고 너무 많은 옵션을 가진다면 직접 입력하게 하고 예외처리를 추가하는 것이 사용자 경험에 좋을 것 같다.

 

 

구현

dropdown.tsx

import React, { useState } from 'react';

import classNames from 'classnames/bind';

import styles from './index.module.scss';

interface Props {
  title: string;
}

const cn = classNames.bind(styles);

const DropDownMenu: React.FC<Props> = ({ title }) => {
  const optionList = ['1', '2', '3'];
  const [value, setValue] = useState<string>('');

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!value) return;

    console.log(value);
  };

  return (
    <form onSubmit={onSubmit} className={cn('form')}>
      <div className={cn('dropdown_box')}>
        <div className={cn('dropdown_title', { dropdown_title_active: value })}>
          {title}
        </div>
        <select
          onChange={(e) => setValue(e.target.value)}
          required
          name="number"
          className={cn('dropdown')}
        >
          <option value=""></option>
          {optionList.map((item, index) => (
            <option value={item} key={index}>
              {item}
            </option>
          ))}
        </select>
      </div>
      <button type="submit">제출</button>
    </form>
  );
};

export default DropDownMenu;

• 현재 코드에선 title만 Props로 받아오고 있지만 onSubmit 함수도 Props로 받아오면 다른 기능과 연동이 쉬울 것이다.
• select의 onChange를 통해 state를 변경하고 있다.
• select 태그는 다양한 속성을 추가해서 기능을 추가하거나 변경할 수 있다.

출처 : http://www.tcpschool.com/html-tags/select

 

 

dropdown.module.scss

.form {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
}

.dropdown_box {
    position: relative;
    width: 200px;
    height: 50px;
    border: 1px solid black;
}

.dropdown {
    width: 100%;
    height: 100%;

    &:focus {
        outline: none;
    }
}

.dropdown_title {
    position: absolute;
    text-transform: uppercase;
    font-size: 13px;
    top : 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.dropdown_title_active {
    top: 0;
    left: 0;
    transform: none;
    left: 60%;
}

• 값이 존재할 때 title의 위치를 변경하기 위한 class가 따로 있다. (.dropdown_title_active)

 

 

아이템 선택 전                                                                     아이템 선택 후