[Node/React] 쇼핑몰 사이트 만들기 - 07 체크박스 필터 만들기

7-1. 체크박스 리스트 데이터들 만들기

//Data.js
const continents = [
    {
        "_id": 1,
        "name": "Africa"
    },
    {
        "_id": 2,
        "name": "Europe"
    },
    {
        "_id": 3,
        "name": "Asia"
    },
    {
        "_id": 4,
        "name": "North America"
    },
    {
        "_id": 5,
        "name": "South America"
    },
    {
        "_id": 6,
        "name": "Australia"
    },
    {
        "_id": 7,
        "name": "Antarctica"
    }

]

export {
    continents,
  
}

7-2.~7-3. 체크박스를 위한 UI 만들기, onChange Function 만들기

          <Checkbox
            list={continents}
            handleFilters={(filters) => handleFilters(filters, "continents")}
          />
        </Col>
        <Col lg={12} xs={24}>
          
          
//CheckBox.js
              const renderCheckboxLists = () => props.list && props.list.map((value, index) => (
        <React.Fragment key={index} >
            <Checkbox onChange={() => handleToggle(value._id)}
                checked={Checked.indexOf(value._id) === -1 ? false : true} />
            <span>{value.name}</span>
        </React.Fragment>
    ))

    return (
        <div>
            <Collapse defaultActiveKey={['0']} >
                <Panel header="Continents" key="1">

                    {renderCheckboxLists()}

                </Panel>
            </Collapse>
        </div>
    )
}

function CheckBox(props) {
  	const [Checked, setChecked] = useState([]);

 	const handleToggle = (value) => {
    //누른 것의 Index를 구하고
    const currentIndex = Checked.indexOf(value);
    //전체 Checked된 State에서  현재 누른 Checkbox가 이미 있다면
    const newChecked = [...Checked];

    // State 넣어준다.
    if (currentIndex === -1) {
      newChecked.push(value);
      // 빼주고
    } else {
      newChecked.splice(currentIndex, 1);
    }
    setChecked(newChecked);
    props.handleFilters(newChecked);
  };  

7-4. handleFilter 만들기

  const [Filters, setFilters] = useState({
    continents: [],
    price: [],
  });

    const handleFilters = (filters, category) => {
    const newFilters = { ...Filters };

    newFilters[category] = filters;

    console.log("filters", filters);

    if (category === "price") {
      let priceValues = handlePrice(filters);
      newFilters[category] = priceValues;
    }
    showFilteredResults(newFilters);
    setFilters(newFilters);
  };

  handleFilters={(filters) => 
  handleFilters(filters, "continents")}

//product.js
  for (let key in req.body.filters) {
    // 필터에 따라서
    if (req.body.filters[key].length > 0) {
      if (key === "price") {
        findArgs[key] = {
          //Greater than equal, 이것보다 크거나 같은
          $gte: req.body.filters[key][0],
          //Less than equal, 이것보다 작거나 같은
          $lte: req.body.filters[key][1],
        };
      } else {
        findArgs[key] = req.body.filters[key];
      }
    }
  }
// 필터에 해당하는것만 찾기 위해