[React] Zustand 설치 방법 및 예제 살펴보기

Intro

안녕하세요. 이번 시간에는 Zustand 설치 방법 및 예졔를 살펴보도록 하겠습니다. 그전에 앞서 zustand 가 무엇인지 궁금하신 분들은 위 포스팅 참고 부탁드립니다 :) 

 

How to install Zustand

Zustand 설치방법은 아래와 같습니다.  각자 사용하는 패키지 관리 툴(npm / yarn)에 맞춰 설치해주시면 됩니다. 

1. npm 

npm install zustand

 

2. yarn 

yarn add zustand

 

Zustand Simple Example

간단한 예제로 카운터를 만들어 보겠습니다. 

 

zustand를 import하고, 상태 컨테이너를 생성해줍니다. 컨테이너 안에는 count, increment(), decrement()이 들어있습니다.

import create from 'zustand'

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

 

이후 Counter 컴포넌트에서 앞서 만들어놓은 useCounterStore를 활용하여 아래와 같이 카운터를 구현할 수 있습니다. useStore() 훅을 사용하여 상태를 가져오고, 업데이트 하는 모습입니다. 

import React from 'react'
import { useStore } from 'zustand'

const Counter = () => {
  const { count, increment, decrement } = useCounterStore()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}