[Project] QueryString을 이용한 Filter기능

  const [itemList, setItemList] = useState([]);
  const [sort, setSort] = useState('');
  const [size, setSize] = useState('');
  const [colorList, setColorList] = useState([]);

  const sortData = [
    { filter_boolean: !!sort || !!size || !!colorList.length },
    { limit: 10 },
    { offset: 0 },
    { sort },
    { size },
  ];

  const colorArray = [];

  for (let i = 0; i < colorList.length; i++) {
    colorArray.push({ color: colorList[i] });
  }

  const filterData = [...sortData, ...colorArray];

  function sortButton(e) {
    setSort(e.target.value);
  }

  function sizeButton(e) {
    setSize(e.target.value);
  }

  function colorButton(e) {
    if (e.target.checked) {
      setColorList(colorList.concat(e.target.value));
    }

    if (!e.target.checked) {
      setColorList(colorList.filter(element => element !== e.target.value));
    }
  }

  let string = '';

  for (let i = 0; i < filterData.length; i++) {
    if (!!Object.values(filterData[i])[0]) {
      let quaryString = Object.entries(filterData[i])
        .map(e => e.join('='))
        .join('&');
      // if (!string) {
      //   // string += '?' + quaryString;
      // } else {
      string += '&' + quaryString;
      // }
    }
  }

  useEffect(() => {
    fetch(`http://10.58.6.175:8000/products/product?sub_category_id=1` + string)
      .then(res => res.json())
      .then(data => {
        setItemList(data.result.product_data_list);
      });
  }, [string]);

• 각각의 정렬할 데이터 값을들 useState를 사용하여 값을 할당하고, checkBox를 이용하여 checked가 true일때, value를 가져와 그 value값들을 state에 할당하였다.
• 각각의 state에서 저장하고, 배열형식을 이용하여 QueryString문으로 전달하기 위한 객체를 만들기 위해
  배열문 안에 객체들을 선언하였다.
• !!을 이용하여 값들을 true인지 false인지 확인하고, true인 값들만 나오게 할 수 있게 되었다.
• 컬러들을 중복으로 선택하여, 값들을 가져와 color:black같은 형태를 만들기 위하여 빈 배열을 만들고, 그안에 저장하기로 했다.
• for문을 이용하여, 선택되었던 컬러값들을 빈 배열안에 객체형식의 키 값 형식으로 넣어준다
• 그후, 스프레드를 이용하여 기존에 있던 배열들의 요소들을 나열하고, colorArray배열을 가져와 하나로 합친다.
• 컬러선택 버튼을 누르면, concat을 이용하여 선택하였던 색상의 value값을 가져와 더하여 저장한다.
• 컬러선택이 해제되었다면, filter메소드를 이용하여, 해제하였던 컬러를 제외하고 나머지를 저장한다.
• 빈 문자열을 저장할 변수를 하나 만들고 for문을 이용하여 저장했었던 color배열의 값들만 추출하기 위해 Object.value()메서드를 사용한다.
• !!를 사용하여 배열이 비어있지 않으면 실행한다
• Object.entries()메서드를 사용해 객체의 키, 값을 가져오고 map함수를 사용하여 요소들을 나열하고, =와 &를 사용해 요소들 끼리를 묶는다.
• useEffect에 QueryString을 사용하기 위해 저장하였던 변수 string을 URI에 더하여 처리한다.