• 목차

플랫 업데이트

Zustand로 상태를 업데이트 하는 것은 간단합니다! 제공된 set 함수를 호출하면 스토어(store)의 기존 상태와 새로운 상태를 얕게 병합(shallowly merge)합니다. 다음 섹션에서는 중첩된 상태에 대해 다룹니다.

namesStore.js

import { create } from 'zustand';

const namesStore = (set) => ({
  firstName: '',
  lastName: '',
  setFirstName: (firstName) => set({ firstName }),
  setLastName: (lastName) => set({ lastName }),
});

const useNames = create(namesStore);

export default useNames;

App.jsx

**import { useStore } from './useStore';**

function App() {
  **const [firstName, setFirstName] = useStore(
		({ firstName, setFirstName }) => [firstName, setFirstName],
		shallow,
	);**

	return (
		<main>
			<label>
				First Name
				<input 
					type="text"
					value={**fistName**}
					onChange={(e) => **setFirstName(e.target.value)**}
				/>
			</label>
			<p>Hello, <strong>{**firstName**}!</strong></p>
		</main>
	);
}

2. 상태 업데이트 - 플랫 업데이트 - StackBlitz

깊게 중첩된 객체 업데이트

다음과 같이 깊숙히 중첩된 상태 객체가 있다고 가정합니다.

const store = (set) => {
	deep: {
		nested: {
			obj: {
				count: 100,
			},
		},
	},
	// ...
}

중첩된 상태를 업데이트하려면 프로세스 변경없이 수행되도록 약간의 노력이 필요합니다.

<aside> 📌 상태를 깊숙히 중첩하여 만드는 것은 관리를 어렵게 하므로 가급적이면 상태를 플랫(flat)하게 유지하는 것이 좋습니다.

</aside>