Zustand

내일배움캠프 LGLG!

주특기 플러스 주차 - Team Project

Zustand

1. Zustand 설치

   yarn add zustand
   

2. store 생성 ```js import create from ‘zustand’

const useStore = create(set => ({ // 초기값 선언 bears: 0, // bears를 1씩 증가 increasePopulation: () => set(state => ({ bears: state.bears + 1 })), // bears를 0으로 리셋 removeAllBears: () => set({ bears: 0 }) }))

export default useStore

3. store에 생성한 useStore 불러와서 사용하기
```js
import useStore from '../store.js'

const App = () => {
  const { bears, increasePopulation, removeAllBears } = useStore(state => state)
  
  return (
    <>
      <h1>{bears} around here ...</h1>
      <button onClick={increasePopulation}>one up</button>
      <button onClick={removeAllBears}>remove all</button>
    </>
  )
}

Devtools를 통해 상태 Debugging하기

• Chrome 확장프로그램 설치 필요 (Redux DevTools) ```js import create from ‘zustand’ import { devtools } from ‘zustand/middleware’

const store = (set) => ({ bears: 0, increasePopulation: () => set(state => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }) })

const useStore = create(devtools(store))

export default useStore ```

• 이 후 위에서 생성한 store에서 devtools를 불러온 뒤 연결
• 현재 작업하고 있는 앱을 브라우저로 띄운 뒤, 개발자 도구 창에서 Redux Devtools을 확인해보면 store의 상태를 확인할 수 있음