react state-management zustand

https://github.com/pmndrs/zustand

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

위 github page를 보고 기초만 해봤다. 그림1처럼 count state에 대해 증가/감소/초기화로 세개의 이벤트를 만들고 실행해보니 잘 된다.뭐 이렇게 쉽지? 뒤로가면 어려워지겠지.

설치부터 하고

C:\Dev64\workspace\project> npm i zustand@3.7.1

다음은 테스트 소스로 create로 store를 생성하고 useStore로 꺼내 쓸 수 있다.

set으로 현재 state를 받아 새로운 state를 반환하는 function을 parameter로 받는다. 말이 좀 이상하네.

그냥 현재 state를 argument로 변경된 state를 return하는 function을 parameter로 작성한다.정도? 말이 어렵네.

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import create from "zustand";

const useStore = create(set => ({
    count: 0,
    increase: () => set(state => ({count: state.count + 1})),
    decrease: () => set(state => ({count: state.count - (state.count >= 1 ? 1 : 0)})),
    reset: () => set({count: 0})
}));


function App() {
    return (
        <div className="App">
            <Counter/>
            <br/>
            <br/>
            <br/>
        </div>
    );
}

function Counter() {
    const count = useStore(state => state.count);
    const increase = useStore(state => state.increase);
    const decrease = useStore(state => state.decrease);
    const reset = useStore(state => state.reset);

    return (
        <>
            <h1>Count : {count}</h1>
            <button onClick={increase}>increase</button>
            {` `}
            <button onClick={decrease}>decrease</button>
            {` `}
            <button onClick={reset}>reset</button>
        </>
    )
}

export default App;

그림 1

useStore 사용시 다음과 같이 한번에 할당해 사용할 수 있다. 이 경우 state변경에 모든 component가 re-rendering된다.

const state = useStore();