[React] useState 배열의 객체 수정

👉 장바구니 추가/수정/삭제 등의 상태 관리 구현을 하다가
장바구니 아이템의 수량을 수정하는 부분에서 버그가 생겼다.
아래는 문제 해결을 위한 기록.

🧩 useState가 아닌 배열의 객체 key와 value 수정

let items = [{'id':1, 'quantity':1}, {'id':2, 'quantity':1}]
/*만약 id가 1인 객체의 수량(quantity)을 바꿔주고 싶다면*/

let findIndex = items.findIndex(item => item.id === 1)
/* id가 1인 객체의 인덱스 값을 먼저 찾아 변수에 넣어주고 */

items[findIndex].quantity = 2;
/* 해당 인덱스의 key에 새로운 값을 할당하면 된다 */

🧩 useState로 상태가 변경되는 배열의 객체 key와 value 수정

const [items, setItems] = useState([{'id':1, 'quantity':1}, {'id':2, 'quantity':1}])

let findIndex = items.findIndex(item => item.id === 1)
/* id값으로 인덱스를 찾는 것까지는 동일하다 */

let copiedItems = [...items];
/* 새로운 변수를 선언해 기존의 배열을 복사하는 과정을 거쳐야 한다.
useState로 만든 변수는 set함수로만 값을 변경할 수 있기 때문이다. */

copiedItems[findIndex].quantity = 2;
/* 복사한 배열에 수정할 값을 할당하고 */

setItems(copiedItems);
/* setItems를 사용해 수정한 배열로 items를 업데이트 한다. */