Zustand - 상태 관리 라이브러리(굉장히편하다)

Zustand는 독일어로 ‘상태'라는 뜻을 가진 라이브러리이며 Jotai를 만든 카토 다이시가 제작에 참여하고 적극적으로 관리하는 라이브러리이다.

 

특징

• 특정 라이브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)
• 한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.
• Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
• React에 직접적으로 의존하지 않기 때문에

아래의 공식문서링크를 타고 가보면 굉장히 짧다. 사용법 또한 예시코드로 잘 되어 있어서 직접 코딩을 해보면서 튜토리얼을 진행하면 프로젝트에 금방 사용할 수 있다. redux와 같이 Store로 구성해서 사용할 수 있으나 보일러플레이트가 없다. 그래서 초기 세팅을 따로 해줄 필요가 없다. 전역상태로 값이 공유되니 굉장히 편하다.

 

//CountStore.js

import create from "zustand";
const countStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  removeAllCount: () => set({ count: 0 }),
}));

export { countStore };

 

//App.js
import { useNavigate } from "react-router-dom";
import { countStore } from "./components/CountStore";
function App() {
  const { count } = countStore();
  const navigate = useNavigate();

  function Controls() {
    const handleIncreases = countStore((state) => state.increase);
    return <button onClick={handleIncreases}>클릭</button>;
  }

  function Return() {
    const handleRemove = countStore((state) => state.removeAllCount);

    return <button onClick={handleRemove}>초기화</button>;
  }
  return (
    <div>
      <p>this is {count}</p>
      <Controls />
      <Return />
      <button
        onClick={() => {
          navigate("/about");
        }}
      >
        About
      </button>
    </div>
  );
}

export default App;

 

//About.js
import { useNavigate } from "react-router-dom";
import { countStore } from "./components/CountStore";

function About() {
  const { count } = countStore();
  const navigate = useNavigate();

  function Controls() {
    const handleIncreases = countStore((state) => state.increase);
    return <button onClick={handleIncreases}>클릭</button>;
  }

  function Return() {
    const handleRemove = countStore((state) => state.removeAllCount);

    return <button onClick={handleRemove}>초기화</button>;
  }
  return (
    <div>
      <p>this is {count}</p>
      <Controls />
      <Return />
      <button
        onClick={() => {
          navigate("/");
        }}
      >
        Home
      </button>
    </div>
  );
}

export default About;

 

Home과 About에서 count의 값을 공유한다

 

 

Zustand Documentation