immer.js로 불변성 관리

Immer.js란?

---

Immer.js는 불변성을 쉽게 관리할 수 있도록 도와주는 JavaScript 라이브러리이다.
특히 상태 관리가 중요한 React 애플리케이션에서 유용하게 사용된다.
Immer.js는 복잡한 상태 업데이트를 간결하고 직관적으로 작성할 수 있게 해준다.

Immer.js의 주요 특징

---

1. 불변성 유지: Immer.js는 원본 상태를 직접 수정하지 않고 불변성을 유지한다.
   대신, produce 함수를 통해 새로운 상태를 생성한다.

2. 간단한 문법: 기존 상태를 기반으로 새로운 상태를 작성하는 과정을 단순화한다.
   복잡한 상태 업데이트 로직을 간결하게 표현할 수 있다.

3. 타입 안정성: TypeScript와 함께 사용하면 타입 안정성을 제공하여 코드의 안전성을 높인다.

설치와 사용법

---

npm install immer
또는
yarn add immer

기본 사용법

---

Immer.js의 핵심은 produce 함수이다. 이 함수는 두 개의 인수를 받는다.
첫 번째 인수는 원본 상태이고, 두 번째 인수는 초안 상태를 변경하기 위한 함수이다.

예제코드

---

간단한 상태 업데이트와 객체 상태 업데이트 예제를 통해서 알아보자.

import produce from "immer";

const baseState = [
  {
    todo: "Learn immer",
    done: false
  },
  {
    todo: "Use immer",
    done: false
  }
];

const nextState = produce(baseState, draft => {
  draft[1].done = true;
});

console.log(nextState);
// [
//   { todo: "Learn immer", done: false },
//   { todo: "Use immer", done: true }
// ]

const baseState = {
  name: "John",
  age: 30,
  hobbies: ["reading", "gaming"]
};

const nextState = produce(baseState, draft => {
  draft.age = 31;
  draft.hobbies.push("coding");
});

console.log(nextState);
// {
//   name: "John",
//   age: 31,
//   hobbies: ["reading", "gaming", "coding"]
// }

Immer.js의 장점

---

1. 코드 가독성 향상: 상태 업데이트 로직을 더 읽기 쉽고 유지보수하기 쉽게 만든다.
2. 불변성 보장: 원본 상태를 보호하여 예기치 않은 상태 변경을 방지한다.
3. 성능 최적화: 깊은 복사 없이 효율적인 상태 관리를 가능하게 한다.

결론

---

Immer.js는 상태 관리의 복잡성을 줄이고 코드를 간결하게 만드는 데 유용한 도구이다.
특히, 복잡한 상태 업데이트가 필요한 대규모 프로젝트에서 유용하다.
불변성을 지키며 상태 관리를 더욱 쉽게 할 수 있다.