Zustand 사용하기

회사 다니면서 여러가지 상태 관리 라이브러리를 알아보게 되었는 데

Redux, Recoil, Zustand 밖에 안써보았지만, 좋았던 순서대로 나열하자면

Zustand >> Recoil >>>>>>>>> Redux 라고 할 수 있을 것 같다.

 

Redux 쓰다가 Recoil 써보고 와 신세계다 했는 데 Zustand를 쓰니 입이 다물어 지지 않을 정도였다. 

 

 

장단점

Redux	- 다른 상태 관리 라이브러리에 비해 불필요한 세팅 코드가 많다. - 느끼기에 따라 다르겠지만, 나 같은 경우에는 흐름 잡기 좋았던 것 같다.
Recoil	- 불필요한 세팅이 필요가 없다. (Redux 보다 훨씬 코드가 간결하다.) - atom과 selector를 비교해서 사용하는 부분이나, 하나의 selector에 switch를 사용하는 과정에서 이해가 어려웠던 것 같다. - 코드에 양이 많아졌을 때 useRecoilState, useRecoilValue이 다른 state들과 헷갈린다.
Zustand	- 불필요한 세팅이 필요가 없다. (Redux 보다 훨씬 코드가 간결하다.) - create로 store를 만들면 세팅이 끝나서 어렵지 않았다. - 하나의 store에 변수, 미들웨어를 만들기 쉬웠다. (객체 형태로 담아 버려면 된다.) - 불러와 사용 할 때도 사용 할 Store에서 필요한 것만 불러와서 사용하기 때문에 가독성이 좋았던 것 같다.

 

코드

import create from 'zustand'

const [useStore] = create(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 })),
  dec: () => set(state => ({ count: state.count - 1 }))
}))

function Counter() {
  const count = useStore(state => state.count)
  return <span>{count}</span>
}

function Controls() {
  const { inc, dec } = useStore()
  return (
    <>
      <button onClick={inc}>up</button>
      <button onClick={dec}>down</button>
    </>
  )
}

출처 https://velog.io/@augusty/Zustand-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-Redux-%EC%96%B4%EB%A0%B5%EA%B2%8C-%EC%93%B0%EC%A7%80%EB%A7%88%EC%84%B8%EC%9A%94

위 코드처럼 하나의 컴포넌트에 하나의 store를 연결해서 사용하는 방법이 있었는 데,

 

나 같은 경우는 store를 하나의 js 파일로 분리해서 사용하였다.

import axios from "axios";
import create from "zustand";

// state 보관함
export const cssStore = create((get, set) => ({
  Var: false,
  Fun: (toggleState) => {
    cssStore.setState({ ...cssStore, isToggled: toggleState });
  },
  Api: async () => {
    await axios
      .get("/api/#", { data: {} })
      .then((res) => console.log(res.data))
      .catch((error) => {
        console.error(error);
        return;
      });
  },
}));

 

추가적으로 코딩애플 영상을 보고 쉽게 감을 잡을 수 있었다. (추천👍)