Zustand

 

아이씨 뭐라 읽는지부터 헷갈려서 계속 찾아봤다.

 

"주스탄드"

 

🐶 간결하고 러닝 커브도 거의 없는 편이라 차세대 상태 관리 라이브러리로 불린다.

 

🐶 간결하다는건 결국 작은 프로젝트에 잘 맞는다는 뜻이고 여전히 큰 프로젝트에는 Redux 쓰는 게 일반적인 것 같다.

 

설치

npm i zustand

 

Store 세팅 (zustand.js)

import { create } from "zustand"

const useStore = create((set) => ({
    bears: 0, // 초기 State 값
    bearPlus: () => set((state) => ({bears: state.bears + 1})), // State를 변경하는 함수
    bearReset: () => set((state) => ({bears: 0})) // State를 고정 변경하는 함수
  })  
);

export default useStore

 

reducer를 통째로 store 내부에 담아주면 끝

 

State 불러오기

import useStore from "./ ... /zustand.js"

...

function App () {
  const store = useStore((state) => state.bears);
  const plus = useStore((state) => state.bearPlus);
  return(
    <>
      <p>{store}</p>
      <button onClick={plus}>Plus Bear! </button>
    </>
  )
};