21.07.03 React/ Immer

목적

• 불변성 유지를 쉽게(?) 하는데 사용합니다.
• 리듀스에서 새로운 State를 리턴해줄 때, 불변성 유지를 위해 스프레드(...state)를 사용하거나 또는 map, concat, filter 등을 사용하였는데, Immer를 사용하면 push 같은 것을 그냥 사용해도 된다.

import produce from 'immer';

const ImmerPrac = () => {
// 초기 값 (todo를 initial state라고 생각해봅시다.)
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;