장바구니 삭제 구현

[컴포넌트 구성] ⭐️ Basket > MainBasket > Item

특정 상품 "삭제 버튼"을 click하면 ==> 삼품이 삭제된다.

생각
input: 삭제 버튼 클릭이 잘 되는가? (console.log를 이용하여 확인)
output: orderList에서 실제 호출한 item의 id를 제거한다.

🍒 Item 컴포넌트에 있는 개별 제품 삭체 버튼에 onClick 이벤트를 주고 함수를 만들어주어야겠다고 생각했다.

1)

<button onClick={this.deleteItem} type="submit">

onClick 함수를 보면 Item 위에 해당 함수를 만들어주었는데, 상위 컴포넌트에서 함수를 만든 후에 Item 컴포넌트로 props를 적용시켜 적용해 주기로 하였습니다.

• ✅ 부모에 state가 있고 자식 컴포넌트에 함수를 주어야 하는 이유
  props는 변경이 불가능하기 때문에, 부모 컴포넌트에서 state와 함수를 만든 후에 자식에 넘겨줘야 한다.

<script>

deleteItem = () => {
    this.props.deleteBasketItem(this.props.id);
  };
  
</script>  

또한 deletBasketItem은 (this.props.id)를 받아오는데, 먼더 왜 id를 받아오는지에 대해 알아햐 한다.

• ✅ 왜 Id를 parameter로 받아야하는지.
  장바구니에서 아이템을 삭제하려면, 삭제할 정확한! 아이템을 지정해 주어야 합니다. 여기에서 id와 index를 생각해 볼 수 있는데 index로 받아올 경우 장바구니의 리스트가 추가/삭제 될 때 모든 배열의 상태가 변경된다. 그러나 상품 고유의 Id값으로 구분한다면 상품을 삭제하더라도 그대로 상품을 받아올 수 있다.

2)

deleteBasketItem은 상위인 MainBasket에서 상속받았고, MainBasket의 deleteBasketItem은 더 상위 컴포넌트인 Basket 에서 상속받도록 하였다.

• Item의 상위 컴포넌트 MainBasket

<ul className="basket_items">
	{odList.map(item => {
		return (
		<Item
		      deleteBasketItem={this.props.deleteBasketItem} ✅
                      changeCount={this.props.changeCount}
                      key={item.id}
                      id={item.id}
                      prImg={item.image}
                      prTitle={item.name}
                      prPrice={item.price}
                      prDiscount={item.discount}
                      prCount={item.count}
                    />
                  );
                })}
              </ul>

• MainBasket의 상위 컴포넌트 Basket (최상위 컴포넌트)

<script>

(state & 함수)
class Basket extends Component {
  constructor() {
    super();
    this.state = {
      orderList: [],
    };
  }
  
  deleteBasketItem = cool => {
    // cool 이란 어떤 객체인지 구분해 주는 특정 데이터이다. ex) id	
    let { orderList } = this.state;
    this.setState({
      orderList: orderList.filter(order => {
        if (order.id === cool) {
          return;
        }
        return order;
      }),
    });
  };
  }


(컴포넌트)
<MainBasket
              odList={orderList}
              changeCount={this.changeCount}
              deleteBasketItem={this.deleteBasketItem} ✅
            />
            
</script>

✅ filter 사용하기
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

• 언제 filter 쓰는지.

저는 장바구니(배열)에서 특정 아이탬(요소)를 지우고 싶어합니다. filter를 이용하면 삭제하는 방법도 가능한데, 해당 요소를 선택한 후 요소에 대해 아무 값을 주지않고 return하면 그 요소가 삭제됩니다.

예를 들어 아래 배열에서는 필터를 사용하여 요소 2를 없앨 수 있습니다.

<script>

[1, 2, 3, 4, 5].filter (el => {
	if (el == 2) {
    return ;
    }
    return el  
}
)

// [ 1, 3, 4, 5 ]
</script>

• filter를 사용하여 원하는 값을 가져올 때 - 10보다 큰 값 가져오기

<script>

function big(value) {
	return value >= 10; 
}

let filtered = [12, 11, 2, 10, 3, 55, 0].filter(big);
console.log(filtered); 
// [ 12, 11, 10, 55 ]

</script>