React -5

immer를 사용하여 더 쉽게 불변성 유지하기

일반적인 나머지 연산자를 사용한 복사는

객체 내부의 객체까지 깊은 복사가 되지 않는다. (주소값만 가져옴)

const person = {
	name: "김이름",
    age: 40,
    address : {
    }
}

-> address는 주소만 복사가 됨.

설치

yarn add immer

immer 사용법

import { produce } from 'immer';
const nextState = produce(originalState, draft => {
	// 바꾸고 싶은 값 바꾸기
	draft.somewhere.deep.inside = 5;
})

---

setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, done: !item.done } : item,
      ),
    );

//immer 사용

setItems(
      produce((draft) => {
        draft.forEach((item) =>
          item.id === id && (item.done = !item.done),
        );
      }),
    );

foreach를 사용할 수 있음. 원래 foreach는 새로
운 주소를 가진 배열을 생성하지 않지만 immer을 사용함면 무관하게 사용가능하다.
(push, foreach.. 등)