원래 객체 배열을 복제합니다.

• 객체 배열은 원래 배열을 직접 수정하지 않고 새로운 배열을 생성하여 업데이트합니다.

새로운 객체를 만들어서 원하는 속성을 변경합니다.

• 객체를 직접 수정하는 것이 아니라, 새로운 객체를 생성하여 필요한 속성만 변경합니다.

변경된 객체를 새로운 배열에 추가ㅣ합니다.

• 기존 배열에서 변경된 객체를 찾아서 새로운 배열에 추가합니다.

setState() 메서드를 사용하여 상태를 업데이트합니다.

• 새로운 배열을 state에 저장하여 업데이트합니다.

state = {
  objArray: [
    { code: "", name: "", key: "key_empty" },
    { code: "A", name: "A", key: "key_A" },
    { code: "B", name: "B", key: "key_B" },
    { code: "C", name: "C", key: "key_C" }
  ]
}

// 1. 배열의 요소 찾기
const findIndex = this.state.objArray.findIndex(element => element.code == "B");
// 예제에서는 code라는 속성이 유일한 값이라 생각하고 code 속성을 기준으로 code: "B"인
// 인덱스를 찾습니다.indexOf() 함수 또는 findIndex() 함수를 사용합니다.

// 2. 배열의 복사본 만들기
let copyArray = [...this.state.objArray];
// state를 setState() 함수를 사용하지 않고 직접 수정하면, 리 렌더링 되지 않으므로 
// ES6의 스프레드 연산자(...)를 사용해서 배열의 복사본을 생성합니다.

// 3. code가 "B"인 name의 값을 변경
if(findIndex != -1) {
  copyArray[findIndex] = {...copyArray[findIndex], name: "Update"};
}
// findIndex() 함수는 주어진 판별 함수를 만족하는 값이 없으면, -1을 반환합니다.
// 조건문을 만족하면, 배열의 복사본에서 name의 값을 변경합니다.

// 4. setState() 함수로 state변경
this.setState({
  objArray: copyArray
});