[React] 배열을 업데이트하는 일반적인 패턴

이 블로그 글에서는 리액트에서 배열을 변경하지 않고도 배열을 업데이트하는 흔한 패턴을 살펴보겠습니다. 이러한 방식은 상태를 변경할 때 원본 배열을 직접 수정하지 않고도 새로운 배열을 생성하여 업데이트하는 방법으로, 리액트 애플리케이션에서 흔히 사용됩니다. 

 

1. 배열에 요소 추가하기

새로운 아이템을 배열에 추가할 때는 전개 연산자(...)를 사용하여 기존 배열을 복사하고, 새로운 요소를 추가합니다.

const updatedCart = [...shoppingCart, { id: 4, product: "Coffee Mug", price: 7.99 }];

2. 배열에서 요소 삭제하기

배열에서 요소를 삭제할 때는 filter 메서드를 활용하여 삭제하고자 하는 요소를 제외한 새로운 배열을 생성합니다.

const updatedCart = shoppingCart.filter(item => item.id !== 2);

3. 배열의 모든 요소 업데이트하기

배열의 모든 요소를 업데이트할 때는 map 메서드를 사용합니다. 이를 통해 각 요소를 새로운 값으로 변환하여 새로운 배열을 생성합니다.

const updatedCart = shoppingCart.map(item => ({
  ...item,
  product: item.product.toLowerCase(),
}));

4. 배열에서 특정 요소만 업데이트하기

특정 요소만 업데이트할 때는 map 메서드를 사용하고, 조건문을 통해 해당 요소를 찾아 업데이트합니다.

const updatedCart = shoppingCart.map(item => {
  if (item.id === 3) {
    return { ...item, price: 10.99 };
  } else {
    return item;
  }
});

이러한 패턴들은 리액트 애플리케이션에서 배열 상태를 업데이트할 때 자주 사용되며, 불변성을 유지하여 예측 가능한 상태 관리를 가능케 합니다. 배열을 직접 수정하지 않고 새로운 배열을 생성함으로써 리액트의 효과적인 상태 관리를 할 수 있습니다.