Zustand - 요즘 인기 있는 간편한 React 상태 관리 라이브러리

React 상태 관리 라이브러리란?

React에서는 상태 값을 useState나 useReducer를 이용해서 관리할 수 있습니다만,

다양한 컴포넌트, 페이지에서 공유하기 위해는 상태 관리 라이브러리를 사용하는 것이 편리하고 좋습니다.

그중 유명한 것들이 Redux, Recoil, Zustand 등이 있습니다.

 

그중 Zustand 특징, 설치 방법, 사용법에 대해서 작성해 보겠습니다.

Zustand 란?

React 상태 관리 라이브러리 중 하나입니다.

가볍고 사용하기 간편해서 Redux 다음으로 가장 npm 다운로드수가 가장 높습니다.

Zustand 특징

React 상태 관리 라이브러리 중 하나인 Redux의 경우에는 사용하기 어렵고, 코드가 복잡합니다.

그래서 React를 공부하는 분들 중에, Redux에서 공부를 포기하는 경우도 많습니다.

 

하지만 Zustand의 경우에는 간단한 코드로 바로 사용할 수 있고,

Redux와 같이 Provider로 포장 없이 사용할 수 있습니다.

Zustand 사용법?

1. 설치

npm install zustand

2. useStore.js

import { create } from "zustand";

const counterStore = (set) => ({
  counter: 0,
  setCounter: (num) => set(() => ({ counter: num })),
  increaseCounter: () => set((state) => ({ counter: state.counter + 1 })),
});

const useCounterStore = create(counterStore);

export default useCounterStore;

3. page.jsx

"use client";

import useCounterStore from "@/store/client/useStore";

export default function Home() {
  const counter = useCounterStore((state) => state.counter);
  const setCounter = useCounterStore((state) => state.setCounter);

  return (
    <>
      <p>{counter}</p>
      <button
        onClick={() => {
          console.log(counter);
          setCounter(counter + 1);
        }}
      >
        +
      </button>
      <button onClick={() => setCounter(counter - 1)}>-</button>
      <button onClick={() => setCounter(counter + 1)}>+</button>
    </>
  );
}

 

설치 이후, store 생성 후 페이지에 바로 렌더링이 가능합니다.

데이터 변화를 감지하여, 변화된 값은 새롭게 바인딩됩니다.