React(86) 필터기능 구현하기, 셀렉트 박스 사용하기

 

 

상품 판매를 위해서 필터기능은 소중하다. 유저에게 편리한 경험을 제공해줄 수 있기 때문이다.

아래에서 구현하는 필터기능은 순전히 프론트 위주이다. 선택한 필터에서 값을 추출하는 단계까지만 구현한 코드이다.

API의 메소드와 쿼리는 각각마다 다르기 때문에 api를 사용하기 직전까지만 응용가능한 정도로 정리해보았다.

자, 그럼 시작해보자

 

 

결과화면 미리보기

우리가 흔히보는 필터이다

 

---

 

React(86) 필터기능 구현하기, 셀렉트 박스 사용하기

 

CategoryFilter.tsx

일단 준비물로 타입선언부터 해주자

interface Category {
  name: string;
  state: string;
}

 

 

필요한 변수를 준비물로 선언해주자.

 // 요 카테고리 아이템들 속에는 { 이름과 상태 } 값들이 들어있다
 const category = [ 		
      { name: '추천 순', state: 'recommand' },
      { name: '조회 순', state: 'view' },
      { name: '최신 순', state: 'latest' },
  ];
  
  // 셀렉트박스 내 들어갈 초기값 설정
  const [categoryItem, setCategoryItem] = useState<Category>(category[0]);
  
  // 토글설정은 false 로 셀렉트 박스를 닫아놓자
  const [toggle, setToggle] = useState<boolean>(false);

 

필터박스 안의 아이템을 클릭할때 사용될 필터링 함수이다 :) 

구체적인 api 호출 내용은 생략하겠다.

  function filterCategory (cate: Category) {
    setCateItem(cate);
    setToggle(false);
    // ... api 호출
  };

 

HTML 태그의 구조는 셀렉트 박스와 드랍다운 메뉴로 나뉘어 있으며,

위에서 선언한 객체 배열을 매핑하여 필터 아이템으로 촤라락 보여준다.

<div
  className={`select-box ${toggle ? 'open' : ''}`} // 토글시 open 클래스를 추가하고 css 를 바꿔주자
  onClick={() => setToggle(!toggle)} 		   // 클릭하면 토글상태값이 변함
>
  {categoryItem.name} 				   // 셀렉트 박스에는 선택된 값이 보이게 된다.
  <img src={arrow} />
</div>

{toggle && ( 				
  <div className="select-dropdown">	// 토글이 오픈된 경우 드랍박스가 내려온다 
    {category.map((cate, index) => ( 	// 위에서 준비한 카테고리 배열을 매핑돌려서 보여주자
      <div
        className="select-item"
        key={index}
        onClick={() => filterCategory(cate)} // 클릭시 필터 메소드가 실행된다
      >
        {cate.name}
      </div>
    ))}
  </div>
)}

 

 

결과화면

필터를 클릭하고 선택을 해보니 아주 잘된다!