[React] Redux toolkit 에러 해결하기 (Immer 어쩌구 저쩌구 에러)

💬 에러 메시지 겸 참고한 stackoverflow 링크

Immer An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft

리덕스 툴킷을 사용한다면, 다음과 같은 메시지를 보게 되는 경우가 있다. 스택 오버 플로우에서 그 해답을 찾았다.

✔ 에러 원인 힌트: redux toolkit을 사용하면 내장된 기능 중에 immer라는 것이 있다.

 

---

 

⭐ immer

redux-toolkit 사용 시 사용자가 원본 state를 건드려도 내부에서 원본 state를 변경하지 않도록 알아서 관리해주는 라이브러리이다. 즉 redux-toolkit 내장 라이브러리(?)라고 생각하면 된다.

 

⭐ 원인

새 값을 반환하면서 원본도 수정했기 때문에 다음과 같은 에러가 났던 것이다. 아예 새 값을 전달하고 싶은 것인지 아니면 수정한 원본을 전달하고 싶은 것인지 툴킷은 판단할 수 없어 충돌에러가 일어났다고 보면 된다.

(코드는 문제코드랑 해결코드랑 같이 있어서 밑에 첨부하였습니다.)

⭐ 해결방법

✔ 방법 A : 원본만 수정하고 return문 쓰지 않기.

✔ 방법 B : 아예 완벽하게 새로운 참조형 데이터 만들어서 반환하기

 

그런데 방법 A를 쓰는 게 좋다고 한다. 왜냐하면 B는 원본과 관련이 없는 완전한 깊은 복사를 수행하고 새로운 참조형 데이터를 반환해야하기 때문이다. 완전한 깊은 복사는 새로운 배열이나 객체를 만들고 하나하나 복사해서 해야 하는 정말 귀찮은 과정이기 때문에 방법A를 쓰는 것이 훨씬 편리하고 좋다.

 

이해를 위해 코드 스니펫(방법A를 사용)을 첨부한다. 일부분만 가져온 것이다.

const todosSlice = createSlice({
    name: "todo",
    initialState,
    reducers: {
        addContent: (state, action) => {
            const id = state.total.length
                ? state.total[state.total.length - 1].id + 1
                : 0;
            const title = action.payload.title,
                desc = action.payload.desc;
            let newCard;
            if (title === "" || desc === "") {
                alert("제목 또는 내용이 비어있는지 확인해주세요!");
                // return state;
            } else {
                newCard = {
                    title,
                    desc,
                    id,
                    done: false,
                };
                // immer 가 불변성 관리 알아서 해줌. 밑에 return 주석은 수정 전 코드!
                state.total.push(newCard);
                // return { ...state, total: [...state.total, newCard] } // 중요!⭐ 객체는 먼저 한 번 뿌리고 뒤에서 프로퍼티 찾아서 바꾸는 식으로 생각.
            }
        },
	}
})

---

리덕스 툴킷은 정말 사기적인 라이브러리가 아닌가? 불변성 관리를 알아서 해준다니...신경 안쓰고 로직을 짤 수 있게 됐다. (물론 immer는 찾아보면 약간의 속도 저하 문제가 있긴 하다고 함!)