Immer

• 리액트에서 배열이나 객체를 업데이트 해야 할 때에는 불변성을 지켜야 함
• immer 라이브러리 사용하면 깔끔하게 코드 작성 가능
• immer는 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리 대신 해줌

Immer 사용법

1. Immer 설치
   • $ yarn add immer
2. 코드 상단에 Immer 불러옴 → 보통 produce이름으로 불러옴
   • import produce form ‘immer’;
3. produce 함수 사용
   • 첫 번째 파라미터: 수정하고 싶은 상태
   • 두 번째 파라미터: 어떻게 업데이트하고 싶을지 정의하는 함수(불변성 신경쓰지 않고 그냥 업데이트하면 알아서 해줌)
   •  

const state={
	number:1,
	dontChangeMe: 2
};

const nextState = produce(state, draft => {
	draft.number+=1;
});

console.log(nextState);
//{number:2, dontChangeMe:2 }

Immer와 함수형 업데이트

const [todo, setTodo] = useState({
	text: 'Hello',
	done: false
});

const onClick = useCallback(() => {
	setTodo(todo => ({
		...todo,
		done: !todo.done
	}));
}, []);

→ useState와 useCallback으로 함수 업데이트

 

Immer 사용하여 함수형 업데이트

produce 함수에서

• 첫 번째 파라미터에 넣은 상태를 불변성 유지하면 새로운 상태 만들어 줌
• 첫 번째 파라미터 생략하고 바로 업데이트 함수 넣어주면 반환 값은 새로운 상태가 아닌 상태를 업데이트 해주는 함수가 됨

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

const updater = produce(draft = > {
	draft.done = !draft.done;
});

const nextTodo = updater(todo);

console.log(nextTodo);