21.07.03 React/Immer

目的

不変性の維持が容易(?)使用します.

ダイレクトリーダーでは、不変性を保つためにスプレッドシート(.state)やmap、concat、filterなどを使用し、Immerを使用してpushなどを直接使用することができます.

import produce from 'immer';
const ImmerPrac = () => {
//初期値(todoを初期状態とする)
const todo = {
text: 'hello',
done: false,
};

// immer를 사용하지 않았을 때 👇
const newTodo = { ...todo, done: true };

// immer를 사용했을 때 👇
const changeTodo = produce(todo, (dr) => {
	dr.done = true; // 임머를 썼기 때문에 이렇게 대놓고 바꿔버려도 됨
});
/**
 * 첫번째 파라미터는 변경하고자 하는 값 (리듀스에서는 state)
 * 두번째 파라미터에는 변경하고자 하는 값에서 무엇을 어떻게 바꿀지 명령
 * concat, filter.. 이런것을 굳이 쓰지 않아도 됨.
 * 다만, immer의 무분별한 사용은 성능에 영향을 줄 수 있음. 역시 바닐라 자바스크립트가 짱이라는 소리.
 */

console.log(newTodo); // {text : 'hello', done : true}
console.log(changeTodo); // {text : 'hello', done : true}

// 하지만 원래 값인 todo는 변하지 않았습니다.
console.log(todo); // {text : 'hello', done : false}
// 👆 원래 값인 todo가 변하지 않았다는 것이 중요합니다 << 이것이 바로 불변성유지!

return <></>;

};
export default ImmerPrac;