9월 16일 (목) Cmarket

Cmarket

  const handleClick = (e, id) => {
    let capy = [...cartItems]
    let filterList = cartItems.filter(item => item.itemId === id)
    if (filterList.length === 0) {
      setCartItems([...cartItems, { itemId: id, quantity: 1 }])
    }
    else {
      capy.map(el => {
        if (el.itemId === id) {
          el.quantity++
        }
      })
      setCartItems(capy)
    }
  }

  const handleQuantityChange = (quantity, itemId) => {
    let cartItemsMap = [...cartItems]
    cartItemsMap.map(el => {
      if (el.itemId === itemId) {
        el.quantity = quantity
      }
    })
    setCartItems(cartItemsMap)
  }

컴포넌트 상태 변경시 주의 할 점

이번에도 깜빡했지만 상태를 변경할때는 상태를 직접 변경하지 말고 useState를 활용하여 set함수로 변경을 해야한다

하기의 코드처럼

  const handleQuantityChange = (quantity, itemId) => {
    cartItems.map(el => {
      if (el.itemId === itemId) {
        el.quantity = quantity
      }
    })
    setCartItems(cartItems)
  }

상태를 직접 변경할 경우 react에서는 상태가 변경되었는지 모른다

혹시 상태변경이 되더라도 react에서는 지양하고 있다