[ReactJS] 리액트 오류, Immer only supports setting array indices and the 'length' property

[Immer] Immer only supports setting array indices and the 'length' property at die (http://localhost:3000/static/js/bundle.js:40209:11)  at ...

 

 

오류발생원인

이 오류는 Immer가 배열의 인덱스나 length 속성을 제외한 다른 속성을 직접 변경하려고 할 때 발생한다. Immer는 불변성 유지를 위해 내부적으로 동작하며, 배열의 구조를 변경하는 작업은 제한적으로만 허용된다.

 

 

Immer는 다음과 같은 작업은 허용한다.

• 배열의 특정 인덱스 값 변경
• 배열의 length 속성 변경
• 배열에 요소를 추가하거나 제거 (push, pop, splice 등)

 

그러나 배열에 직접적으로 새 속성을 추가하려고 하면 오류가 발생한다.

let arr = [1, 2, 3];
// Immer가 관리하는 상태에서 배열에 새로운 속성 추가 시도
arr.customProperty = 'test'; // 오류 발생!

 

 

 

해결 방법

Immer는 배열을 객체처럼 사용하는 행위를 금지합니다. 따라서 배열에 데이터를 추가하려는 경우, 다른 구조를 사용하거나 올바른 방법으로 변경해야 한다. 배열은 인덱스를 통해 접근하거나, 객체를 배열 안에 포함하여 데이터를 관리해야 한다.

 

리듀서에서 state는 initialState 전체를 나타낸다. 즉, state는 배열이다. 하지만 state.count를 접근하려고 했는데, 배열 자체에는 count라는 속성이 없기 때문에 문제가 발생하는 것이다.

// 오류 구문
let cartData = createSlice({
  name : 'cartData',
  initialState : [
    { id : 0, title: 'white and black', count : 0},
    { id : 1, title: 'grey yordan', count : 0},
  ],
  reducers : {
    changeCount(state) {
      return state.count ++; // state는 배열이므로, state.count는 undefined
    }
  }
})

 

 

특정 id를 가진 배열 요소의 count 값을 증가시키려면 배열을 순회하거나, 특정 요소를 직접 찾아서 수정해야 한다.

let cartData = createSlice({
  name: 'cartData',
  initialState: [
    { id: 0, title: 'white and black', count: 0 },
    { id: 1, title: 'grey yordan', count: 0 },
  ],
  reducers: {
    changeCount(state, action) {
      // action.payload로 변경할 id 전달
      const id = action.payload;
      const item = state.find((item) => item.id === id); // id로 해당 항목 찾기
      if (item) {
        item.count++; // count 값 증가
      }
    },
  },
});

export let { changeCount } = cartData.actions;
export default cartData.reducer;

 

 

리듀서를 호출할 때, 변경하고 싶은 id를 payload로 전달한다.

import { useDispatch } from 'react-redux';
import { changeCount } from './store';

function App() {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(changeCount(0))}>
      Increase Count for Item 0
    </button>
  );
}

 

---

 

 

state는 initialState 전체를 가리키며, 배열의 속성을 직접 접근하면 오류가 발생한다. 특정 항목을 수정하려면 배열의 요소를 찾아야 한다. Redux Toolkit의 createSlice는 상태를 직접적으로 수정하는 방식(불변성 처리 자동화)을 지원하므로, 배열 요소를 찾아 값을 변경하면 된다.