❌

const [filterList, setFilterList] = useState([]);
.
.
.
const filterItem = (e) => {
	const filterBtn = e.target.innerHTML;
  const filter = productsList.filter((item) => item.gender === filterBtn);
  console.log(filter);
  setFilterList(filter);
 };
.
.
.
<div className="productCard_wrap">
	{filterList.map((list, idx) => (
	  <ProductCard list={list} key={idx} />
   ))}
 </div>

맨 처음 짠 코드에 문제는

• ProductCard에 props로 넘겨준 data 자체가 필터링이 된 후의 data들이기 때문에, 랜더링 직후에 아무런 data를 넘겨주지 못한다는 점

• MEN과 WOMEN을 각각 클릭하면 필러링은 되지만,

  그 다음에 다시 다른 버튼을 클릭하면 아무 data가 없다는 점

  (MEN → WOMEN 인 경우, MEN인 data 안에서 WOMEN인 data가 있을 리 없다.)

여러가지 방법을 시도해 본 끝에,

UseEffect로 넘겨준 getProducts 함수 안에 filtering 되기 전 모든 data를 담고 있는 setFilterList를 넣어주면 되지 않을까 생각이 들었다.

그렇다면, 화면을 처음 켰을 때, 모든 data가 보일 것이고, 다른 버튼을 누른 후에도 전체 data에서 필터링을 하니까 제대로 작동할 것 같았다.

⭕ 수정 후

**const [filterList, setFilterList] = useState([]);**
const [productsList, setProductsList] = useState([]);
.
.
const getProducts = async () => {
	let url = `http://localhost:5000/products`;
	let response = await fetch(url);
	let data = await response.json();
	setProductsList(data);
	**setFilterList(data);**
 };
.
.
.
<div className="productCard_wrap">
	{**filterList**.map((list, idx) => (
		<ProductCard list={list} key={idx} />
	))}
</div>

📌다른 더 좋은 방법이 있는지 계속 생각해보기!!