[Query String]

프로젝트 중 상품 리스트 필터 기능을 구현하기 위해 Quarry String을
사용 해 보았음.

query string 을 사용할 때 여러가지 방법이 있는데
Qs 라이브러리, useState와 useEffect를 사용한 방법 , useSearchParms.set() 여러가지 방법들 중 useState와 useEffect를 사용한 방법으로 해 보았음.

먼저 필터가 필요한 부분을 카테고리 별로 나누고
클릭을 했을 때 클릭한 카테고리를 useState를 사용하여 데이터를 저장하는 로직을 만듬.

카테고리 중 에서도 어떤 것은 하나만 선택이 가능하고 어떤 것은 중복선택이 가능하기 때문에 useState에 담을 때 하나만 선택이 가능한 카테고리는 문자열('') , 중복선택이 가능한 카테고리는 배열([ ]) 형태로 저장함.

마지막으로 useEffect와 useState를 활용하여 하나의 객체안에 위에서 저장했던 카테고리들을 한번에 담았음.

각각의 카테고리의 값이 변했을 때만 랜더링이 되도록 의존성 배열 설정을 해줌.

클릭이벤트 함수들은 전부 클릭하면 카테고리 값에 변화를 주고 저장하고
만약에 이미 저장되어 있다면 삭제하는 로직을 만듬.

마지막으로 위의 함수를 사용하여 객체를 배열로 만들고 map을 돌려서 클릭을 할때마다 원하는 부분에 url주소를 추가해줌.