[Zustand] Zustand 기본 사용법

📌 포트폴리오 스킬셋 부분을 작성하면서, 제대로 알고 있는 상태관리 툴이 없다는 것을 느꼈다. RTK(redux-tool-kit), recoil 두 개를 사용해보았지만 딱 기본 수준이었다. 많은 클라이언트 상태관리 툴 중, Zustand를 선택해 보다 깊게 학습하려고 한다.

Zustand란?

클라이언트 상태관리 툴 중 하나로,
Zustand라는 이름은 독일어로 '상태'를 뜻한다고 한다.

매우 쉬운 Flux 패턴을 따르는 툴이라서, 기존에 Redux를 사용했던 분들은
더 재밌게 사용하실 수 있을 것 같다.

npm trends를 통해 본 상태관리 툴들의 다운로드 수 비교 데이터이다.
가장 많이 쓰이고 있는 것은 아직까지 Redux지만, 그 다음으로는 Zustand가 MobX보다 다운로드 수가 많은 것을 볼 수 있다.

Zustand의 장점
Redux의 단점을 보완하여 초기 설정 코드가 거의 없고, 로직이 직관적이다. 또한, Context API처럼 Provider로 컴포넌트를 감싸지 않아, 상태 변경 시 불필요한 리렌더링이 일어나지 않는다는 장점이 있다.

(참고)

• 각 상태관리 툴들과의 비교
• Zustand의 더 많은 장점들

Redux는 규모가 큰 프로젝트에서 장점이 있다고 알고 있는데, 어떤 툴을 사용할지는 본인의 현재 상황에 따라 잘 비교해서 선택하면 좋을 것 같다.

---

기본 사용법

설치하기

# NPM
npm install zustand

# Yarn
yarn add zustand

Store 생성

아주 간단한 카운터 예제를 만들어보았다.
참고로, Typescript 환경에서 진행하여 다른 부분이 있을 수 있다.

// App.tsx
import { create } from 'zustand';

const TEN_THOUSAND_WON = 10000;

interface MoneyState {
  money: number;
  increaseMoney: () => void;
  decreaseMoney: () => void;
}

export const useMoneyStore = create<MoneyState>()((set) => ({
  money: 0,
  increaseMoney: () =>
    set((state) => ({ money: state.money + TEN_THOUSAND_WON })),
  decreaseMoney: () =>
    set((state) => ({ money: state.money - TEN_THOUSAND_WON })),
}));

store 생성은 useMoneyStore 코드를 참고하자.
money: 초기 상태 값
increaseMoney: money 값을 +10,000씩 업데이트 할 함수
decreaseMoney: money 값을 -10,000씩 업데이트 할 함수

Store 불러와서 사용

이렇게 만든 useMoneyStore를 불러와, 사용할 수 있다.

// 잔고를 보여주는 MoneyCounter.tsx 컴포넌트
import { useMoneyStore } from '../App';

function Counter() {
  const money = useMoneyStore((state) => state.money);
  return <h1>잔고는 {money.toLocaleString()}원 입니다.</h1>;
}

export default Counter;

// money를 업데이트 하는 Controls.tsx 컴포넌트
import { useMoneyStore } from '../App';

const ControlPercent = () => {
  const increaseMoney = useMoneyStore((state) => state.increaseMoney);
  const decreaseMoney = useMoneyStore((state) => state.decreaseMoney);
 
  return (
    <div>
      <button onClick={() => increaseMoney()}>10000원 증가</button>
      <button onClick={() => decreaseMoney()}>10000원 감소</button>
    </div>
  );
};

export default ControlPercent;

기본 사용법은 이게 끝이다. 진짜 끝..

결과

money 값의 변경이 잘 되는 것을 확인할 수 있다.
현실에 저런 버튼 없나

마치며

간단한 Counter 예제를 만들어 Zustand의 기본적인 사용법에 대한 정리를 해보았다. Zustand는 지속적으로 업데이트 중이며, dev tool / 서드파티 라이브러리 / 미들웨어 등 다양한 기능을 제공하고 있다. 공식 문서를 참고해 코드를 짜보며 하나씩 정복해야겠다. 👍

---

참고 문서

• Zustand 공식 문서