중첩 상태 업데이트에 대한 명령적 접근 방식

React에서 상태 업데이트는 변경할 수 없습니다. 즉, 중첩된 객체나 배열을 업데이트하기 위해 단순히 해당 속성을 수정하고 변경 사항이 UI에 반영되기를 기대할 수는 없습니다. 대신, 업데이트된 값을 포함하는 새 객체나 배열을 생성한 다음 이를 setState에 전달해야 합니다.

state:

handleChange: function (e) {
  // Make a copy of the items array
  let items = [...this.state.items];

  // Make a copy of the item object at index 1
  let item = {...items[1]};

  // Change the name property of the copied item
  item.name = 'New Name';

  // Replace the item at index 1 with the updated item
  items[1] = item;

  // Update the state with the new items array
  this.setState({items});
},

이 접근 방식에서는 확산 구문(...)을 사용하여 항목 배열과 인덱스 1에 항목 객체의 얕은 복사본을 만듭니다. 그런 다음 복사된 항목의 이름 속성을 수정하고 업데이트된 버전이 포함된 인덱스 1의 항목입니다. 마지막으로 새 항목 배열로 상태를 업데이트합니다.

이 접근 방식은 간단하며 간단한 상태 업데이트에 적합합니다. 그러나 여러 개의 중첩된 개체나 배열이 포함된 복잡한 상태 업데이트의 경우 번거롭고 오류가 발생하기 쉽습니다.