immer에 대해 알려보자!

https://immerjs.github.io/immer/

Introduction to Immer | Immer

Immer란?

 공식문서를 처음 읽어보면 "Immer는 불변 상태를 더 편리하게 다룰 수 있게 해주는 작은 패키지입니다." 라고 설명이 뜬다. 그럼 생각하게 된다 불변 상태가 뭘까? 이걸 알아야 우리느 Immer를 사용할 수 있다. 

 

불변 상태란?

 불변 상태란 한 번 생성된 데이터가 변경되지 않는 상태를 의미한다. 즉, 기존 객체나 배열을 직접 수정하는 것이 아니라, 새로운 객체를 생성하여 변경된 값을 반영하는 방식을 따른다. 객체를 다루는 예시를 통해서 불변 객체에 대한 예시를 알아보자

// 잘못된 예(불변성이 꺼진 상황) 
const user = { name: "박정규", age: 25 };
user.age = 26;  // 기존 객체 직접 변경해버림ㅜㅜ
console.log(user); // { name: "박정규", age: 26 }

// 올바른 예 (불변성 유지)
const user = { name: "박정규", age: 25 };
const newUser = { ...user, age: 26 }; // 새로운 객체 생성!
console.log(newUser); // { name: "박정규", age: 26 }
console.log(user === newUser); // false (새로운 객체이므로 참조값이 다름)

불변 상태를 유지하는 이유

 그럼 이제 의문이 들것이다. 불변 상태가 뭔지는 알겠는데 저걸 왜 유지해야할까? 그 이유는 React에서 상태(State) 변경을 감지하는 방법은 참조 비교(Reference Comparison) 이기 때문이다. 이전 상태와 새로운 상태의 메모리 주소가 다르면 React는 상태가 변경되었다고 인식하고 리렌더링하게 되는데, 기존 객체를 직접 변경해버렸을 때 변경을 감지하지 못할 수 있다. 

https://ko.react.dev/learn/updating-objects-in-state

객체 State 업데이트하기 – React

 

Immer는 그럼 어떻게 불변 상태를 관리할 수 있을까?

// AS-IS
const user = { name: "박정규", age: 25 };

// 새로운 객체 생성 (불변성 유지)
const newUser = { ...user, age: 26 };

console.log(newUser); // { name: "박정규", age: 26 }
console.log(user === newUser); // false (새로운 객체이므로 참조값이 다름)

// TO-BE ? 
import produce from "immer";

const newUser = produce(user, (draft) => {
  draft.age = 26;  // 직접 변경하는 것처럼 보이지만, 내부적으로 새로운 객체를 생성!
});

console.log(newUser); // { name: "박정규", age: 26 }
console.log(user === newUser); // false (새로운 객체이므로 참조값이 다름)

 

 바로 예시를 들어봤는데, produce()를 활용하여 ...spread, map, filter를 사용하지 않고 내부적으로 새로운 객체를 생성해서 불변 상태를 다를 수 있다. 코드 가독성 면에서도 깊은 복사가 적어지니 더 간결하고 직관적인 코드가 된다.