개요

생각하기엔 엄청 간단한게 무려 3일동안 삽질을해서 충격을받아 기록용으로(혹은 기억용으로) 만들어두고자 이번 포스트를 작성해본다.

다음과같은 Object 객체가 있다고 가정해보자

const [data, setData] = useState([{a: "1"}, {b: "2"}, {c: "3"}, {d: "4"}]);

table 태그에서 onChange 이벤트가 발생할때 data 에 있는 특정값들을 바꿔야 하는 상황이 있었는데 필자는 아래와 같은 시도들을 했는데 잘 되지 않아 답답했었다.

// 시도 1

setData((rowwdata) => {[{
    ...rowwdata,
    [data[i]] = data.map(rowData => {
        if (rowData === data[i]) {

            return {
                ...rowData,
                [rowData[tdValue]]: e.target.value
            };
        }
    })
}]});

// 시도 2
setData((prevState) => {
    if (prevState[i] === data[i]) {
        return {
            [prevState[i]]: [data[i].tdValue] = e.target.value
        }
    } else {
        return {
            ...prevState
        }
    }
});


// 시도 3
const dataTemp = data[i].map(mapRowData => {
    if (mapRowData === data[i]) {
        return {
            ...rowData,
            [rowData[tdValue]]: e.target.value
        };
    } else {
        return rowData;
    }
});
setData(dataTemp);


// 시도 4
setData([{...data, [data[i][tdValue]]}]);

useState 훅에서 Spread 문법과 여러가지를 다해봐도 안되고 해메고 있었는데 아래와같이 간단한 Temp 변수를 하나 선언해 Temp 변수에서 바꿔줬다.

const onChange = (e, i, tdValue, data, setData) => {
    let dataTemp = [...data];
    dataTemp[i][tdValue] = e.target.value;

    setData(dataTemp);

    return;
}

너무 setState 와 spread 문법에 얽매여 있었던거 있었던건지도 모르겠다.

문제점

만약 배열에 항목이 100개가 있다고 가정을 해보면 onChange 이벤트가 발생할때마다 Temp 변수를 선언해주고 그 변수에 100개항목을 다시 저장 및 변경 해주고 setState 해주는데 많이 비효율적 이긴 하다. 이부분은 개선이 필요하다