select 태그 없이 드롭다운을 구현 해보자 !

div 태그로 Drop down 구현하기

보통의 경우 Drop down 을 사용 할 때에는 select 태그를 사용해서 구현을 합니다 .
하지만 일반 태그로도 구현 해 볼 수 있습니다 .
사실 굳이 할 필요는 없지만 그래도 한번 만들어 보았습니다 .

select 태그로 구현한 drop down

const selectList = ["카테고리를 설정해 주세요","All", "games", "shopping", "works", "music", "etc", "private"]

return (
                <Select value = {isSelected} onChange = {handleSelect} >
                {selectList.map((item) => (
                    <option value={item} key={item}>
                      {item}
                      {console.log(isSelected)}
                 </option>
                ))}
                </Select>
)

div로 구현한 drop down

  const [selectChild, setSelectChild] = useState<boolean>(true);
  const chooseHandler = (e: selectType): void => {
    setIsChonsen(e);
    setSelectChild(!selectChild);
  };
  const selectArray = ["카테고리를 설정해 주세요","All", "games", "shopping", "works", "music", "etc", "private"];
return (
              <div className={selectChild ? "selected" : "unselected"}>
                {selectArray.map((e, idx) => (
                  <div
                    className = {isChosen.key === e.key ? 'selected-item' : 'select-item'}
                    key={`idx-${idx}`}
                    onClick={() => chooseHandler(e)}
                  >
                    {e}
                  </div>
)

이렇게 구현을 했고 태그를 클릭하면 true , false가 되는 on off로 만들고 그에따라 className을 바꾸어 주면서

  .selected{
      position: absolute;
    height: 160px;
    width: 180px;
    font-family: gmarket;
    line-height: 27px;
    right: 20px;
    background-color: $gray;
    z-index: 10;
  }
  
    .unselected{
    display: none;
  }

Drop down을 구현해 주었습니다 .