[use-immer] 쉬운 불변성 관리 use-immer

useState와 매우 비슷하다.

첫 번째 값은 현재 상태

두 번째 값은 업데이트 함수이다.

 

 

// 설치 방법
npm install immer use-immer

 

상태값이 객체일 때

import { useImmer } from 'use-immer';

// 상태값이 객체일 때
function App() {
	const [person, updatePerson] = useImmer({
		name: "suhyeok",
		age: "27"
	});

	const updateName = (name) => {
		updatePerson(draft => {
			draft.name = name;
		});
	}

	const plusAge = () => {
		updatePerson(draft => {
			draft.age++;
		});
	}
}

상태값이 배열일 때

import { useImmer } from 'use-immer';

// 상태값이 배열일 때
function App() {
	const [number, updateNumber] = useImmer([1,2,3]);

	const updateName = (name) => {
		updatePerson(draft => {
			draft[0] = 0
		});
	}
}

// number 배열의 0번째 index가 1에서 0으로 변경된다.

 

 

상태를 객체, 배열로 관리할 때 불변성에 신경 안 써도 돼서 좋은 것 같다.