[React]객체 배열에서 값 변경

이번 포스팅에서는 React에서 객체의 배열을 가지는 state 값을 변경하는 방법을 소개합니다.

 

다음과 같이 객체의 배열(objArray)을 가지는 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" }
  ]
}

그리고 code가 "B"인 name의 값을 "Update"로 변경해야 합니다.

 

순서 1. 배열의 요소 찾기

먼저 객체의 배열에서 키, ID, 코드처럼 유일한 값이라고 생각되는 속성을 기준으로 요소의 위치를 찾습니다.

 

예제에서는 code라는 속성이 유일한 값이라 생각하고 code 속성을 기준으로 code: "B"인 인덱스를 찾습니다.

 

indexOf() 함수 또는 findIndex() 함수를 사용합니다.

const findIndex = this.state.objArray.findIndex(element => element.code == "B");

 

순서 2. 배열의 복사본 만들기

state를 setState() 함수를 사용하지 않고 직접 수정하면, 리 렌더링 되지 않으므로 ES6의 스프레드 연산자(...)를 사용해서 배열의 복사본을 생성합니다.

let copyArray = [...this.state.objArray];

 

순서 3. code가 "B"인 name의 값을 변경

findIndex() 함수는 주어진 판별 함수를 만족하는 값이 없으면, -1을 반환합니다.

 

그러므로 findIndex() 함수 리턴 값이 -1이 아닌 경우 값을 변경하도록 조건문을 작성합니다.

 

조건문을 만족하면, 배열의 복사본에서 name의 값을 변경합니다.

if(findIndex != -1) {
  copyArray[findIndex] = {...copyArray[findIndex], name: "Update"};
}

 

순서 4. setState() 함수로 state변경

setState() 함수로 name의 값을 변경한 배열의 복사본을 state에 적용합니다.

this.setState({
  objArray: copyArray
});