[React] immer

const object = {
	somewhere: {
		deep: {
			inside: 3
			...
		}
		...
	}
	...
}

// inside값 변경
const nextObject = {
	...object,
	somewhere: {
		...object.somewhere,
		deep: {
			...object.somewhere.deep,
			inside: 4
		}
	}
}

위 처럼 객체의 구조가 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듭니다.

이렇게 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있습니다.

immer를 설치하고 사용법 알아보기

프로젝트 준비

$ yarn create react-app immer-tutorial
$ cd immer-tutorial
$ yarn add immer

immer 사용법

import produce from 'immer';

const originalState = {
	somewhere: {
		deep: {
			inside: 3
			...
		}
		...
	}
	...
}

const nextState = produce(originalState, draft => {
	draft.somewhere.deep.inside = 5;
})

produce라는 함수는 두 가지 파라미터를 받습니다. 첫 번째 파라미터는 수정하고 싶은 상태이고, 두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수입니다.

두 번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, produce 함수가 불변성 유지를 대신해 주면서 새로운 상태를 생성해 줍니다.

immer의 핵심은 ‘불변성에 신경 쓰지 않는 것처럼 코드를 작성하되 불변성 관리는 제대로 해 주는것’ 입니다.

useState의 함수형 업데이트와 immer 함께 쓰기

immer에서 제공하는 produce 함수를 호출할 때, 첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환합니다.

const update = produce(draft => {
	draft.value = 2;
});

const originalState = {
	value: 1,
	foo: 'bar',
};

const nextState = update(originalState);
console.log(nextState);  // { value: 2, foo: 'bar' }