Zustand

1. Zustand란

Redux와 마찬가지로 상태 관리 라이브러리다.

Redux가 유명하지만 문법적으로 난해한 경향이 있어 다른 라이브러리를 써보고자 한다.

---

2. Zustand 설치

$ npm install zustand

---

3-1. Store 설정

import create from 'zustand';

const useStore = create(() => ({
    count: 0
}));

Zustand에서 제공하는 create함수를 사용해 useStore 훅을 생성한다.

이렇게 만들어진 store를 사용하면 된다.

---

3-2. Store 사용

function App() {
  const { count } = useStore();

  return (
    <div>
      {count}
    </div>
  );
}

store 내부의 count 값이 잘 가져오는 것을 볼 수 있다.

---

4-1. Store 설정

 이번에는 버튼을 눌러 값이 1씩 증가하는 함수와 0으로 초기화하는 함수 두 개를 만들어보겠다.

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increaseCount: () => set(state => ({ count: state.count + 1 })),
  setZero: () => set({ count: 0 })
}));

set 함수는 state의 값을 변경하는 콜백 함수를 인자로 받는다.

---

4-2. Store 사용

function App() {
  const { count, increaseCount, setZero } = useStore();

  return (
    <>
      <div>{count}</div>
      <button onClick={increaseCount}>증가</button>
      <button onClick={setZero}>초기화</button>
    </>
  );
}

 

-증가 버튼 눌렀을 때

 

-초기화 버튼 눌렀을 때

---

5. Devtools 사용

Zustand의 장점 중 하나는 미들웨어를 통해 Redux-devtools을 사용할 수 있다는 것이다.

Redux DevTools 설치 : https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

Redux DevTools

import create from 'zustand';
import { devtools } from "zustand/middleware";

const store = (set) => ({
  count: 0,
  increaseCount: () => set(state => ({ count: state.count + 1 })),
  setZero: () => set({ count: 0 })
});

const useStore = create(devtools(store));

---