Zustand

Zustand란?

: react의 상태관리 라이브러리

 

Zustand 사용법

1.설치 

npm install zustand

 

2. store 생성하기

store.js 파일에

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))

 

3. store.js import 해서 사용하기

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

 

 

내가직접사용하기

 

npm i zustand

src폴더에서 store폴더생성

store에서 필요한 이름의 store.js생성

import { create } from 'zustand'

const useStore = create(set => ({

  cnt : 0,                                                                         # 초기값세팅

  plus : () => set( state => ({ cnt: state.cnt + 1})),          # 초기값을 1증가시키는 함수

  remove : () => set({ cnt : 0})                                        # 초기값을 0으로 만드는 함수

}))

export default useStore

 

다른파일에서 사용하기

import useStore from "../store/store"

 

 

export default function MainPage (){

  const { cnt,plus,remove} = useStore()      

 

  return(

    <div>

      {cnt}

      <button onClick={plus}>증가</button>

      <button onClick={remove}>리셋</button>

    </div>

  )

}

 

 

 

 

const { cnt,plus,remove} = useStore()      는   const { cnt,plus,remove} = useStore(state =>state) 와동일 

const cnt = useStore(state => state.cnt)

const plus = useStore(state => state.plus)

const remove = useStore(state => state.remove)

 

 

const pp = useStore(state=>state.cnt)           변수명 달라도됨 그러면 밑에서 {pp} 로사용

const plus = useStore(state => state.plus)

const remove = useStore(state => state.remove)