React(100) 커스텀 셀렉트 박스에서 옵션 선택하기

 

셀렉트 박스와 클릭시 등장하는 옵션 메뉴를 직접 만들어 보았다 :) 

이번 포스팅에서는 UI 보다는 기능적인 측면만 다루어 보았다

(작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다)

 

결과화면 미리보기

요렇게 클릭하면 등장하는 셀렉트 박스

 

 

---

React(100) 커스텀 셀렉트 박스에서 옵션 선택하기

 

일단 메뉴배열을 useState 를 사용해서 선언해주자 

  const [menu, setMenu] = useState<string[]>(['메뉴1', '메뉴2', '메뉴3', '메뉴4']);
  const [menuItem, setMenuItem] = useState<string>('메뉴1'); // 선택된 메뉴 아이템
  const [showMenu, setMenu] = useState(false); // 옵션박스 열고 닫힘 여부를 알려주는 값

 

옵션박스에서 메뉴를 고르고 클릭하면 호출되는 함수!

메뉴 아이템을 셋업해주고, 옵션박스를 닫아주자

 function handleSelect(cate: string) {
    setMenuItem(cate);
    setShowMenu(false);
  }

 

셀렉트 박스를 클릭시 옵션 박스를 보여주며 옵션박스에서는 메뉴아이템들이 보이고 클릭시 선택할 수도 있다:)

	      <div
                className={`select-box ${showMenu ? 'open' : ''}`}
                onClick={() => setShowMenu(!showMenu)}
              >
                {menuItem}
                <img src={arrow} />
              </div>
              
              {showMenu && (
                <div className="select-options">
                  {menu.map((item, index) => (
                    <div
                      className={`option-item ${item[index] === item ? 'select' : ''}`}
                      onClick={() => handleSelect(item)}
                    >
                      {item}
                    </div>
                  ))}
                </div>
              )}