Javascript Library - Zustand

상태관리 라이브러리는 참 많이있다.

Redux가 상태관리 라이브러리의 시초격(Flux 패턴)이라 할 수 있다.

그렇기 때문에 인기가 많지만 오늘 날 Redux를 기피하는 이유도 있다.

 

그것은 바로 보일러 플레이트 코드 때문이다.

Redx Toolkit이 이러한 점 등을 극복하고 있고 계속해서 업데이트를 하고는 있지만 여전히 보일러 플레이트가 존재한다.

 

**

보일러 플레이트 = 반복해서 사용하는 텍스트를 의미 = 변화없이 여러군대에서 반복되는 코드,

최소한의 변경으로 재사용 할 수 있는 코드 또한 보일러 플레이트 코드라고한다.

 

Flux 패턴 = 단방향의 흐름으로 애플리케이션을 만드는 아키텍처

**

 

그렇기에 최소한의 코드로 상태를 관리하는 방법을 구현해넨 라이브러리가 zustand이다.

 

zustand의 장점은 굉장히 쉽다.

보일러 플레이트가 없다 싶을 정도로 간단한 코드만 필요로 하고, 초기 설정 코드가 아주 간결하다.

redux devtools를 사용할 수 있어서 debugging을 하는데도 아주 용이하다.

Provider로 감싸주지 않아도 된다.

 

src/store.js

import create from "zustand";

const useStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useStore;

create = state 보관함 하나 만들어주는 함수, 여러개 만들어도된다.

ajax요청도 create안에서 해도 된다.

set((state) => ({ bears : state.bears +1 })) <-state 변경하는 법 store안에 함수로 저장해놓자.

 

src/App.js

const App = () => {
  const { bears, increase, removeAllBears } = useStore((state) => state);

  return (
    <div>
      <h1>{bears} around here...</h1>
      <button onClick={increase}>up</button>
      <button onClick={removeAllBears}>remove all</button>
    </div>
  );
};
export default App;

const {state 명} = useStore(); 로 불러와서 사용하면된다.