[react/공부] zustand

zustand 알아보기

 

---

       zustand란? 

zustand는 상태를 관리하는 방법 중 하나로, useState, Context API, RTK와 같은 역할을 하는데 훠어어어얼씬 간편하다. 정말 훨씬.

 

 

---

       사용법 

01 설치하기

npm install zustand

 

 

02 세팅하기

먼저 useStore.js 파일을 만들어준다. (useUserStore 등 원하는 네이밍을 붙여 사용)

그리고 안에 코드를 작성하는데, RTK의 initialState, reducer, action을 한꺼번에 한 함수에 써준다.

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0, // 상태 초기값
  increase: () => set((state) => ({ count: state.count + 1 })), // 액션
  decrease: () => set((state) => ({ count: state.count - 1 })),
  setCount: (value) => set({ count: value }) // payload가 필요한 경우
}));

export default useStore;

이때 payload가 필요한 경우에는 안에 들어가는 함수 안에 인자로 넣어주면 된다.

 

 

03 사용하기

사용하기 위해서는 사용하는 컴포넌트에 가서 단순히 구조분해할당으로 내가 넣어뒀던 state, 함수를 useStore로 아래와 같이 불러와서 사용하면 되는데,

import useStore from './useStore';

const Counter = () => {
  const { count, increase, decrease, setCount } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
      <button onClick={() => setCount(10)}>Set to 10</button>
    </div>
  );
};

export default Counter;

이때 함수를 사용하면서 payload가 필요하면 인자로 넣어주면 끝이다!

 

 

---

너무 간단한 상태관리 라이브러리를 알게되었다 !

앞으로 정말 유용하게 써먹을 것 같다.

이번 프로젝트에 tanstack과 zustand를 사용하고있는데, 다음 포스팅은 tanstack으로 해야겠다~