[React] [Immer] "An immer producer returned a new value and modified its draft. Either return a new value or modify the draft." 에러 해결

🔥 발생한 에러

Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft.

에러를 번역하자면 immer 제작자는 새로운 값을 리턴하거나 기존 상태를 수정하거나 둘 중 하나만 해야된다는 것이다.

 

원인이 되는 코드 분석

immer 라이브러리를 사용하여 불변성 상태의 트리를 손쉽게 변경하던 중 위와 같은 에러가 발생했다.

updatePerson((person) => person.mentors.push({ name, title }));

화살표 함수는 중괄호를 써주지 않으면 자동으로 return 키워드가 붙는다.

즉, 위의 코드는 기존 mentors 배열에 새로운 객체를 push 하면서 return(배열의 길이를 반환)을 같이 했기 때문에 에러가 발생한 것이다.

 

🧯 에러 해결 코드

updatePerson((person) => {
      person.mentors.push({ name, title });
});

중괄호로 감싸주면 깔끔하게 에러는 해결된다.