리액트 타입스크립트 zustand - 셀프 개발자 코딩 부트캠프

리액트에서 상태 관리를 할 때 대부분 리덕스(Redux)라는 것을 사용하는 것 같았다. 쉬운 작업도 복잡하게 되어 있는 것 같아서 심플한 것 찾아봄. 

zustand라는 게 좋아 보임. 

아래는 github 주소.

https://github.com/pmndrs/zustand

 

 

import create from 'zustand'
 
interface CounterState {
 count: number;
 increase:()=>void;
 decrease:()=>void;
}
const useStore = create<CounterState>(set => ({
 count: 0,
 increase: () => set(state => ({ count: state.count + 1 })),
 decrease: () => set(state => ({ count: state.count + -1 }))
}))
 
function IncreaseComp() {
 const increase = useStore(state => state.increase)
 return <button onClick={increase}>+</button>
}
 
function DecreaseComp() {
 const decrease = useStore(state => state.decrease)
 return <button onClick={decrease}>-</button>
}
 
function App() {
 const count = useStore(state => state.count)
 
 return (
     <>
       <div>{count}</div>
       <IncreaseComp></IncreaseComp>
       <DecreaseComp></DecreaseComp>
     </>
  );
}
 
export default App;

간단하게 만들어본 샘플 코드. 그냥 하나의 파일에다가 다 작성했는데 useStore 있는 부분을 다른 파일로 빼서 사용하면 된다.

 

interface CounterState {
 count: number;
 increase:()=>void;
 decrease:()=>void;
 decreaseDelay:()=>Promise<void>;
}
const useStore = create<CounterState>(set => ({
 count: 0,
 increase: () => set(state => ({ count: state.count + 1 })),
 decrease: () => set(state => ({ count: state.count + -1 })),
 decreaseDelay: async () => {
   await new Promise((resolve) => setTimeout(resolve, 1000));
   set(state => ({ count: state.count + -1 }));
 }
}))

비동기 함수도 넣을수 있다.