Immer 라이브러리

- Immer 라이브러리 : 불변성을 관리해주는 라이브러리, produce 함수를 import해 사용(성능 저하가 있긴 함)

produce 함수의 파라미터 : 첫번째 - 수정하고 싶은 객체, 두번째 - 수정하기 위한 함수 

 

1. 라이브러리 없이 복잡한 객체의 불변성 유지

const state = {
  posts: [
    {
      id: 1,
      title: '제목입니다.',
      body: '내용입니다.',
      comments: [
        {
          id: 1,
          text: '와 정말 잘 읽었습니다.'
        }
      ]
    },
    {
      id: 2,
      title: '제목입니다.',
      body: '내용입니다.',
      comments: [
        {
          id: 2,
          text: '또 다른 댓글 어쩌고 저쩌고'
        }
      ]
    }
  ],
  selectedId: 1
};


const nextState = {
  ...state,
  posts: state.posts.map(post =>
    post.id === 1
      ? {
          ...post,
          comments: post.comments.concat({
            id: 3,
            text: '새로운 댓글'
          })
        }
      : post
  )
};

2. 라이브러리 사용한 복잡한 객체의 불변성 유지

import produce from 'immer';

const nextState = produce(state, draft => {
  const post = draft.posts.find(post => post.id === 1);
  post.comments.push({
    id: 3,
    text: '와 정말 쉽다!'
  });
});

3.  produce 함수의 첫번째 파라미터가 생략 시 두번째 파라미터는 업데이트 함수가 되어 useState에서 사용이 가능함

const todo = {
  text: 'Hello',
  done: false
};

// produce 사용없이 상태 업데이트
const onClick = useCallback(() => {
  setTodo(todo => ({
    ...todo,
    done: !todo.done
  }));
}, []);

// produce 사용해 상태 업데이트
const onClick = useCallback(() => {
  setTodo(
    produce(draft => {
      draft.done = !draft.done;
    })
  );
}, []);

console.log(nextTodo);
// { text: 'Hello', done: true }