[Zustand] 불변성과 중첩 상태 관리 (immer)

Immer란

불변성을 유지하면서 가변처럼 상태를 바꿀 수 있게 해주는 도구

import produce from 'immer';

const nextState = produce(baseState, (draft) => {
	draft.users['1'].age = 31;
});

• draft는 프록시 객체

  프록시 객체: 다른 객체를 대신하여 그 객체에 대한 접근을 제어하거나 기능을 확장하는 객체

• 원본은 변하지 않고
• 새로운 불변 객체를 생성
  
  

immer 미들웨어가 적용된 스토어

const useUserStore = create(
	immer((set) => ({
    	users: {
        	'1': {
            	name: '홍길동',
              	profile: {
                	address: { city: '서울', district: '강남구' }
                },
            }
        },
      	updateDistrict: (userId, district) =>
      		set((state) => {
            	state.users[userId].profile.address.district = district
            }),
    }))
)

컴포넌트에서 사용하기

export default function DistrictSelector() {
	const { users, updateDistrict } = useUserStore();
  	const user = users['1'];
  
  	return (
    	<div>
      		<h2>{user.name}님의 현재 구: {user.profile.address.district}</h2>
			<select
				value={user.profile.address.district}
				onChange={(e) => updateDistrict('1', e.target.value)}
			>
  				<option value="강남구">강남구</option>
				<option value="서초구">서초구</option>
				<option value="송파구">송파구</option>
  			</select>
      	</div>
    );
}