immer

immer 를 사용하여 더 쉽게 불변성 유지하기

• 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다.
• 하지만 객체의 구조가 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘들다.
• 전개 연산자를 여러 번 사용하면 번거럽기도하고 가독성도 좋지 않다
• immer 라이브러리를 사용하면 구조가 복잡한 객체도 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있다.

npm install immer

• 사용법

  import produce from 'immer';
  
  const nextState = produce(originalState, (draft) => {
  	draft.somwhere.deep.inside = 5;
  })

• produce 함수는 두 가지 파라미터를 받는다

  • 첫 번째 파라미터는 수정하고 싶은 상태
  • 두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수
  • 두 번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, produce 함수가 불변성 유지를 대신해주면서 새로운 상태를 생성해 준다.

• 조금 더 복잡한 코드 예제

  import produce from 'immer';
  
  const originalState = [
  	{
  		id: 1,
  		todo: 'abcd',
  		checked: true,
  	},
  	{
  		id: 2,
  		todo: 'efgh',
  		checked: false,
  	},
  ];
  
  const nextState = produce(originalState, (draft) => {
  	const todo = draft.find((t) => t.id === 2);
  	todo.checked = true;
  	
  	draft.push({
  		id: 3,
  		todo: 'zzzz',
  		checked: false,
  	});
  
  	draft.splice(draft.findIndex(t => t.id === 1), 1);
  })