[ Front ] Zustand 상태관리 라이브러리

zustand는 최근 많이 인기가 올라온 전역상태 관리 라이브러리이다!!

최근 1년 사용량에 비해서도 jotai나 recoil에 비해서 많은 다운로드 수를 자랑하는 것을 확인할 수 있다.

특히 기간을 조금 더 늘려 보았을 때 현재 가장 성장세가 가파른 것을 확인할 수 있다.

 

 

재밌는 점은 zustand만든사람이 jotai까지 만들었다고 한다! 

 

zustand <- 독일어로 "상태"

jotai <- 일본어로 "상태"

 

두 라이브러리의 차이는 아래 개발자가 직접 설명을 잘해 주었다.

https://github.com/pmndrs/jotai/issues/13

How is jotai different from zustand? · Issue #13 · pmndrs/jotai

 

간단 하게만 설명하자면 jotai는 recoil에 좀 더 가깝고, zustand는 redux에 더 가깝다고 한다.

 

 

zustand의 장점

zustand는 우선 굉장히 쉽고 가볍다. 바닐라 자바스크립트 기준 핵심 로직이 42줄밖에 안된다고 한다.

또한 redux와 유사한것 처럼 redux devtool또한 사용이 가능하며 상태 변경 시 불필요한 리렌더링을 일으키지 않도록 제어하기 쉽다고 한다.

 

zustand는 redux와 같은 flex 패턴을 사용한다. ( 단방향 데이터 흐름을 지닌다 )

 

 

 

이제 document를 보면서 직접 사용해보자!

 

https://docs.pmnd.rs/zustand/getting-started/introduction

Zustand Documentation

 

 

먼저 vite를 활용해서 간단한 리액트 프로젝트 하나를 만들어주자.

npm init vite

 

이후 로컬 서버를 열어주자.

npm i
npm run dev

 

 

 

 

이제 npm을 활용해서 zustand를 설치해주자.

npm install zustand

 

zustand의 store는 훅으로 되어있다! 즉 따로 Provider를 감싸주는 작업 자체가 필요가 없다.

따라서 아래와 같이 store란 폴더를 하나 만들고, 훅의 규칙에 따라서 파일을 만들어보자.

 

 

공식문서에 따라서 아래 내용을 적어보자.

//useTestStore.ts

import { create } from "zustand";

export const useTestStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}));

 

redux와 똑같이 상태가 있고 그 상태를 제어할 수 있는 액션들이 적혀있는 것을 확인할 수 있다.

 

 

이제 App.tsx 파일을 아래와 같이 작성해보자.

import "./App.css";
import { useTestStore } from "../store/useTestStore";

function App() {
  const increasePopulation = useTestStore((state) => state.increasePopulation);
  const bears = useTestStore((state) => state.bears);

  return (
    <>
      <h1>{bears} around here...</h1>
      <button onClick={increasePopulation}>one up</button>
    </>
  );
}

export default App;

 

전역상태 라이브러리와 같이 값을 가져오는 것도 가능하며, 액션을 통해서 상태관리의 값을 업데이트 하는 것 또한 가능하다.

 

실제로 동작도 잘 된다!

 

 

특히 사용법이 너무 쉽고 적용하기가 쉽다는 장점이 있는 것 같다.

 

 

타입스크립트를 적용하기 위해선 아래와 같이 타입 설정을 해주면 된다.

 

import { create } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))