[ React ] 객체 배열 State값 변경하기

React에서 객체 배열의 state값을 변경하는 방법입니다.

 

React에서 아래와 같은 코드가 존재할 때, id3의 이름을 "Newworld"로 변경해 주고 싶다고 가정합니다.

objState = {
    arr: [
        { id: 1, name: "Jun", age: 20 },
        { id: 2, name: "Shiro", age: 23 },
        { id: 3, name: "Helloworld", age: 23 },
        { id: 4, name: "Jeda", age: 15 }
    ]
}

 

먼저 배열에서 유일한 값을 찾아옵니다. ( id처럼 겹치지 않는 유니크한 값을 이야기합니다. )

 

유일한 값 인덱스 찾기

여러가지 방법중 저는 findIndex() 메서드를 사용했습니다.

const index = objState.arr.findIndex(ele => ele.id === 3);

위처럼 id3의 인덱스를 찾은다음, 배열의 복사본을 만들어줍니다.

 

복사본 생성하기

react의 state는 setState를 사용해서 수정해야 하기 때문에 복사본을 생성하여 setState에 넣어줍니다.

let newArr = [...objState.arr];

 

id가 3인 name의 String변경하기

name값 이외에 age값도 같이 변경할 수 있습니다.

if (index !== -1) newArr[index] = {...newArr[index], name: "Newworld"};

 

setState() 함수로 변경한 배열의 복사본을 state에 적용하기

setState({ arr: newArr })

 

생각해보니 항상 백엔드에서 변경된 전체 값을 가져와서 바로 넣어주다보니 프론트에서 변경해서 넣어줄 기회가 없었는데, 변경된 전체내용을 안들고 일부내용만 들고왔을때 어떻게 해야 하나 하다가 사용하게 되었습니다.

 

전체내용

objState = {
    arr: [
        { id: 1, name: "Jun", age: 20 },
        { id: 2, name: "Shiro", age: 23 },
        { id: 3, name: "Helloworld", age: 23 },
        { id: 4, name: "Jeda", age: 15 }
    ]
};

const [state, setState] = useState(objState);

const index = objState.arr.findIndex(ele => ele.id === 3);

let newArr = [...objState.arr];

if (index !== -1) newArr[index] = {...newArr[index], name: "Newworld"};

setState({ arr: newArr });