[React] useSearchParams를 이용한 쿼리스트링 적용

필터 중복선택

const handleChkClick = (category, id) => {
    const getAll = searchParams.getAll(category);
    const idStr = id.toString();

    if (getAll.includes(idStr)) {
      const filteredIds = getAll.filter(item => item !== idStr);
      searchParams.delete(category);
      filteredIds.forEach(id => {
        searchParams.append(category, id);
      });
      setSearchParams(searchParams);
    } else {
      searchParams.append(category, id);
      setSearchParams(searchParams);
    }

    const queryString = searchParams.toString();
    console.log(queryString);
    fetchQueryData(queryString);
  };


<checkBox onClick={handleChkClick} /> 

note) searchParams.remove 메서드의 경우 키값에 해당하는 모든 value가 삭제되므로
체크 토글기능 구현의 어려움이 있음.
따라서 위와같이 커스텀 로직으로 해당 기능을 구현하게 됨.

//gif

더보기 버튼

const handleMoreClick = () => {
  if (maxProductLength > limit) {
    limit += 6;
    searchParams.set('offset', 0);
    searchParams.set('limit', limit);
    setSearchParams(searchParams);
    fetchQueryData(searchParams);
  }
};

<button onClick=(handleMoreClick)>더보기</button>

더보기 버튼을 클릭할 때 마다 limit 값을 원하는 갯수만큼 증가시켜
parameter값으로 넘겨주는 방식이다.
일반적인 페이지네이션이 아닌 계속해서 추가로 보여주는 방식을 원했기 때문에
start값-(offset)은 0으로 고정되도록 작업하였다.