Immer

Immer이란?

React 컴포넌트의 state를 변경해야 할 땐, 무조건 불변성을 유지해야한다.
업데이트 하는 과정에서 기존의 객체의 값을 직접 수정하면 안된다.

const state = {
  users: [
    {
      id: 1,
      username: "Kim"
    }
  ]
}
// No
state.users.push({
  id:2,
  username: "Lee"
})
//No
state.users[0].username = "Lee"

• 객체 구조가 깊어질수록 불변성을 유지하면서 수정하기가 어렵다.

const users = {
  user: [
    {
      id: 1,
      username: "Kim",
      email: "111@naver.com",
    },
    {
      id: 2,
      username: "Lee",
      email: "222@naver.com",
    },
  ],
};

const nextUsers = [...users];
nextUsers[1] = {
  ...users[1],
  email: "Cheo",
};

• immer는 불변성을 유지해주는 라이브러리이다. produce 함수는 현재 상태와 생산자 함수를 인자로 받는다. 생산자 함수는 현재 상태를 나타내는 draft를 인자로 받고 draft에 가해지는 어떠한 수정이든지 기록하고 수정된 상태를 반환한다.

import produce from "immer";

const users = {
  user: [
    {
      id: 1,
      username: "Kim",
      email: "111@naver.com",
    },
    {
      id: 2,
      username: "Lee",
      email: "222@naver.com",
    },
  ],
};
const nextUsers = produce(users, draft => {
  draft[1].username = "Cheo"
})