react - useImmer

useImmer

useImmer는 react에서 useReducer,useState 등 hook들을 사용하여 상태관리를 할 때,중첩배열,중첩객체등 이처럼 상태가 많이 복잡한 상태일경우 useImmer를 사용하면 비교적 간편합니다.
불변성을 지키기 위해 새로운객체를 만들어 상태관리 할 필요 없이 useImmer는 우리가 바꾸고 싶은 객체의 값만 변경해주더라도 내부적으로 새로운객체를 만들어 반환해줍니다.

사용 방법

const [person,updatePerson] = useImmer(initialPerson);

useImmer의 선언을 보겠습니다.

person : 컴포넌트에서 사용할 상태
updatePerson : 상태를 변경하는 하고싶을 때 호출하는 함수
initialPerson = 상태 초기값

update함수

updatePerson( person => {
	const mentor = person.mentors.find(m => m.name === prev);
    	mentor.name = current;
}

이처럼 사용자가 직접 불변성을 지키지않고 객체의 내부값만 변경하여도 useImmer 내부적으로
새로운 값을 반환하여 주기때문에 업데이트가 가능합니다.