React 객체안의 배열의 값을 수정해보자.

상품을 관리하는 상태를 수정해야할 일이 생겼다.
보통의 state를 수정할 때는 간단하게 spread문법을 사용하여 수정을 하면 됐지만,
ex) 해당 키의 값을 입력한 값으로 바꾸는 코드

  const handleChange = (key, e) => {
    setSeries({ ...series, [key]: e.target.value });
  };

하지만 내가 수정해야할 부분은,
상품은 여러개의 상품 그룹으로 구성하여 추가할 수 있고,
ex)

{
id : 1,
groupName : "",
startNAme : "00"
.
.
.
productList : []
}

이런 식으로 상품 데이터 형태가 만들어지고,
productList의 값에는 객체 배열이 들어간다.
저기 빈 배열에 내가 선택한 상품을 넣어야 하고, 어떻게 헤당 id의 상품을 찾아, 하나의 depth를 더 들어가서, 배열에 추가할 것인가에 대해서 고민을 많이 하였다.

기존에 spread 문법을 사용하여 state를 수정하는것을 활용하여 해결하였다.

    setProductData(
      productData.map((obj) => {
        if (`${obj.id}` === groupId) {
          return {
            ...obj,
            productList: [...selectedProduct],
          };
        } else return obj;
      })
    );

map을 활용하여, 내가 선택한 상품 id를 찾아,
해당 productList에 선택한 상품들을 넣는다.