간소화된 Flux 원칙을 사용하는 작고 빠르고 확장 가능한 barebone(매우 간단한) 상태 관리 솔루션
Zustand 설치 및 기본 사용법
설치
npm install zustand
yarn add zustand기본 스토어 생성
create 함수를 사용하여 상태를 정의하고, set을 통해 값을 변경한다.
import { create } from "zustand";
const useStore = create((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
decrease: () => set((state) => ({ count: state.count - 1 })),
}));상태 사용
useStore()를 호출해 상태를 가져오고, 버튼 클릭 시 increase, decrease 함수를 실행하여 상태를 업데이트한다.
function Counter() {
const { count, increase, decrease } = useStore();
return (
<div>
<p>Count: {count}</p>
<button onClick={increase}>+</button>
<button onClick={decrease}>-</button>
</div>
);
}Zustand의 핵심 기능
상태 선택 (Selector)
Zustand는 필요한 값만 가져와서 사용할 수 있다.
이렇게 하면 count 값이 변경될 때만 리렌더링되므로 성능 최적화가 가능하다.
const count = useStore((state) => state.count);미들웨어 활용 (Persist, DevTools 등)
Zustand는 미들웨어를 통해 기능을 확장할 수 있다.
import { create } from "zustand";
import { persist } from "zustand/middleware";
// persist를 사용하면 상태를 로컬 스토리지에 저장할 수 있다.
const useStore = create(
persist(
(set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
}),
{ name: "count-storage" }
)
);비동기 상태 관리
비동기 API 호출도 간단하게 처리 가능하다.
fetchUser를 호출하면 비동기적으로 데이터를 가져와 상태를 업데이트한다.
const useStore = create((set) => ({
user: null,
fetchUser: async () => {
const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
const data = await response.json();
set({ user: data });
},
}));Zustnad 특징
- typescript로 작성
- 리덕스를 축소화시킨 느낌으로 리덕스와 유사함
- 스토어 형태
- provider 필요없음 -> 앱을 래핑하지 않아도 되기 때문에 불필요한 리렌더링 최소화
- flux 패턴을 사용
- 러닝 커브가 낮다
Zustand 장점
- 굉장히 쉽다. 동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다. (VanillaJS 기준)
- 보일러플레이트가 거의 없다. (Context API랑 비교)
- redux Devtools를 사용할 수 있어 debugging에 용이하다.
- 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
- 브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)
- 의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.
- Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
- React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다.
