[동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자)

이번에는 좌측에 위치한 필터들을 클릭했을 때, 해당 필터에 해당하는 제품들을 보여주는 기능을 구현해보고자 한다.
한 번 클릭하면 필터가 활성화되고, 두 번 클릭하면 해제되는 형태이다. 토글등등 다양한 방법을 고민해보았는데, 결국 아래 3단계로 완료할 수 있었다.

1. 필터리스트 스테이트 관리

 const handleFilter = e => {
    let filterArr = filters;
    filterArr.indexOf(e.target.id) === -1
      ? filterArr.push(e.target.id)
      : filterArr.splice(filterArr.indexOf(e.target.id), 1);
    setFilters(filterArr);
    setQueryParameter();
  };

필터를 클릭할때마다 state로 선언한 filters에 핕터목록을 배열로 넣어준다. 단 이미 해당 필터가 들어있을때에는 splice로 제거한다.

2. 백엔드에 GET요청할 URL 생성

 const setQueryParameter = () => {
    let queryParameter = '';
    let addParamFilters = [];
    if (filters) {
      filters.forEach(filter => {
        addParamFilters.push(`${param}-${filter}`);
      });
      queryParameter = `${API.productList}${param}&sub=${addParamFilters}`;
    } else {
      queryParameter = `${API.productList}${param}`;
    }
    setUrl(queryParameter);
  };

1번에서 만든 필터를 백엔드와 약속한 형태로 전처리한 후 url이라는 state를 최신화한다.

3. useEffect로 렌더링 요청

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(product => {
        setProducts(product.result);
        setSubtotal(product.count);
      });
  }, [url]);

url값이 바뀔때마다 바뀐 url로 fetch를 요청하도록 useEffect를 작성.

4. 총평

일견 괴랄한 코드이나 백엔드와 통신해보니 잘굴러갑니다.
작성 중 useEffect구문 내에서 dependency이슈로 에러가 있었는데, fetch에서 가져오는 url을 하단 의존성배열에 넣어 해결하였습니다.
코드리뷰이후 변경될 경우 해당 코드의 문제점 및 보완사항도 3부작으로 업데이트하고자합니다.

그럼 아디오스