immer

immer

객체의 구조가 엄청나게 깊어지면 불변성을 유지하기 어려워진다.

	//somewhere.deep.array에 5 추가하기
	let nextObject = {
	...object,
	somewhere: {
	...object.somewhere,
	deep: {
	...object.somewhere.deep,
	array: object.somewhere.deep.array.concat(5)
	}
	}
	};

view raw ex.js hosted with ❤ by GitHub

위와 같이 값 하나를 업데이트하기 위해 코드를 열 줄 정도 작성해야 한다. 이럴 때, immer라는 라이브러리를 사용하면 매우 쉽고 짧은 코드로 불변성을 유지할 수 있다.

	import React, { useRef, useCallback, useState } from 'react';
	// immer 라이브러리에 produce 메서드를 사용
	import produce from 'immer';
	const App = () => {
	const nextId = useRef(1);
	const [form, setForm] = useState({name : '', username : ''});
	const [data, setData] = useState({
	array: [],
	uselessValue: null
	});
	const onChange = useCallback(
	e => {
	const {name, value} = e.target;
	setForm(
	// state를 변경할 때, produce 함수를 사용한다.
	// 변경할 데이터를 첫 번째 파라미터에 넣고
	// 두 번째 파라미터로 arraw function을 넣는다.
	produce(form, draft => {
	draft[name] = value;
	})
	);
	},[form]
	);
	const onSubmit = useCallback(
	e => {
	e.preventDefault();
	const info = {
	id: nextId.current,
	name: form.name,
	username: form.username
	};
	setData(
	// produce는 배열을 새로 만들지 않고 직접 제어해도 무방하다.
	produce(data, draft => {
	draft.array.push(info);
	})
	);
	setForm({
	name:'',
	username:''
	});
	nextId.current += 1;
	}, [data, form.name, form.username]
	);
	const onRemove = useCallback(
	id => {
	setData(
	produce(data, draft => {
	draft.array.splice(draft.array.findIndex(info => info.id === id), 1);
	}));
	}, [data]
	);
	return(
	<div>
	<form onSubmit={onSubmit}>
	<input
	name="username"
	placeholder="ID"
	value={form.username}
	onChange={onChange}>
	</input>
	<input
	name="name"
	placeholder="NAME"
	value={form.name}
	onChange={onChange}>
	</input>
	<button type="submit">submit</button>
	</form>
	<div>
	<ul>
	{data.array.map(info => (
	<li key={info.id} onClick={() => onRemove(info.id)}>{info.username} ({info.name})</li>
	))}
	</ul>
	</div>
	</div>
	);
	};
	export default App;

view raw ex.js hosted with ❤ by GitHub

위의 예시와 같이 사용하면 불변성에 신경 쓰지 않으면서 관리할 수 있다.