[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법

"react": "^18.2.0",
"zustand": "^4.5.2"
"typescript": "^5.2.2",

Zustand란?

zustand는 수많은 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적이며, 단순한 방식의 사용법을 제공하여 최근에 굉장히 각광받는 라이브러리이다.

개인적으로는 러닝커브가 높지 않다는 게 아주 큰 장점이 아닐까 싶다.

Zustand 설치 및 적용

Zustand 설치

# NPM
npm install zustand

# Yarn
yarn add zustand

여느 라이브러리와 같이 동일하게 추가를 해주고 별다른 설정은 필요 없다.

Zustand 사용

아주 간단하게 설치를 마쳤으니 사용도 아주 손쉽게 해 보도록 하자.

공식문서에서도 아주 간단하게 설명이 되어있는데, 공식문서 예제를 참고하여 실제로 만들어 보자.

countStore.ts

import { create } from 'zustand'
import { devtools } from 'zustand/middleware'

type TCountStore = {
  count: number
  increase: () => void
  decrease: () => void
}
export const useCountStore = create<TCountStore>()(
  devtools((set) => ({
    count: 0,

    increase: () => set((state) => ({ count: state.count + 1 })),
    decrease: () => set((state) => ({ count: state.count - 1 })),
  }))
)

타입스크립트 기반으로 작업하다 보니까 타입을 지정해주어야만 했고, 공식문서에서 스토어를 정의하는 방식을 그대로 사용하였다.

다만 devtools라고 선언한 부분은 추가로 정의한 부분인데 이는 개발할 때 편하게 확인이 가능하도록 추가해 준 옵션이니 추후에 기회가 되면 글을 작성하고자 한다.

당장 궁금하다면 깃허브에 설명이 되어 있으니 살펴보길 바란다.

https://github.com/pmndrs/zustand?tab=readme-ov-file#redux-devtools

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

CountView.tsx

import { useCountStore } from '../store/countStore'

const CountButton = () => {
  const increase = useCountStore((state) => state.increase)
  const decrease = useCountStore((state) => state.decrease)

  return (
    <>
      <button onClick={increase}>증가</button>
      <button onClick={decrease}>감소</button>
    </>
  )
}

const Count = () => {
  const count = useCountStore((state) => state.count)
  return <div>{count}</div>
}

export default function CountView() {
  return (
    <>
      <Count />
      <CountButton />
    </>
  )
}

이제 위에서 선언한 스토어를 tsx에서 활용하는 방식이다.

아주 간단하게 스토어에 선언한 프로퍼티를 원하는 것만 불러와서 사용하기만 하면 된다.

const count = useCountStore((state) => state.count)

결과물

 

아주 간단하게 적용된 것을 볼 수 있다.

예제 코드가 간단해서 아마 어느 상태 관리 라이브러리를 사용하더라도 간단하게 적용이 가능할 것인데,

이는 점점 사이즈가 커질수록 그 장점이 뚜렷해질 것이라고 생각한다.

어차피 이 글은 기본적인 사용법만 설명한 글이니까 말이다.

 

재미있게도 Zustand라이브러리와 다른 라이브러리를 가볍게 비교한 공식문서 내용이 있는데 이것도 쓱 살펴보길 바란다.

이렇게 설치와 기본 사용법에 대해 정리 스타트를 끝냈으니 실제로 현업에서 도입하고 나서 발생했던 이슈, 사용한 방식 등에 대해 하나씩 정리하고자 한다.

---

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

Zustand Documentation