selectbox2 React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 셀렉트 박스와 클릭시 등장하는 옵션 메뉴를 직접 만들어 보았다 :) 이번 포스팅에서는 UI 보다는 기능적인 측면만 다루어 보았다 (작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다) 결과화면 미리보기 React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 일단 메뉴배열을 useState 를 사용해서 선언해주자 const [menu, setMenu] = useState(['메뉴1', '메뉴2', '메뉴3', '메뉴4']); const [menuItem, setMenuItem] = useState('메뉴1'); // 선택된 메뉴 아이템 const [showMenu, setMenu] = useState(false); // 옵션박스 열고 닫힘 여부를 알려주는 값 옵션박스에서 메뉴를 고르.. 2023. 9. 16. React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 상품 판매를 위해서 필터기능은 소중하다. 유저에게 편리한 경험을 제공해줄 수 있기 때문이다. 아래에서 구현하는 필터기능은 순전히 프론트 위주이다. 선택한 필터에서 값을 추출하는 단계까지만 구현한 코드이다. API의 메소드와 쿼리는 각각마다 다르기 때문에 api를 사용하기 직전까지만 응용가능한 정도로 정리해보았다. 자, 그럼 시작해보자 결과화면 미리보기 React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 CategoryFilter.tsx 일단 준비물로 타입선언부터 해주자 interface Category { name: string; state: string; } 필요한 변수를 준비물로 선언해주자. // 요 카테고리 아이템들 속에는 { 이름과 상태 } 값들이 들어있다 const category = [.. 2022. 10. 31. 이전 1 다음 반응형
