사연

React로 서비스를 개발 하는 도중 state의 배열 값의 특정한 인덱스의 값을 변경해야 할 일이 생겼다. 막상 맞딱뜨리니까 뭔가 쉽지 않았다. Velopert님 React강의를 듣던 와중에 뭔가 배운거 같기는 한데 ㅎㅎ 머리를 쥐어짜다가 어느정도 감이 와서 해결하게 되었다. 전개연산자(Spread Operator)를 활용하였다.

간단한 예제

let arr = [1,2,3,4,5];

이 배열의 2번째 인덱스를 10으로 교환해보자.
결과 값은

[1,2,10,4,5];

가 나오도록!!

해결

const index = 2;
const newVal = 10;
arr = [
    ...arr.slice(0, index),
    newVal,
    ...arr.slice(index + 1)
]

리액트 setState에서의 사용예시

const newfile = {
    s3KeyThumbnail: 'blahblah.jpg';
    size: 1024,
    ext: 'jpg'
}
this.setState(state => ({
    ...state,
    files: [
        ...state.files.slice(0, index),
        newFile,
        ...state.files.slice(index + 1)
    ]
}));