Zustand

Zustand는 경량 상태 관리 라이브러리로, React 애플리케이션에서 쉽게 상태를 관리할 수 있도록 도와줍니다.

Redux와 같은 다른 상태 관리 라이브러리와 비교했을 때,

API가 간단하고 보일러플레이트 코드가 적다는 장점이 있습니다.

Zustand 설치하기

먼저, Zustand를 프로젝트에 설치합니다.

npm install zustand

또는 Yarn을 사용하는 경우

yarn add zustand

Zustand 기본 사용법

Zustand는 상태 저장소를 생성하는 함수를 제공합니다. 이 함수는 상태와 상태를 업데이트하는 방법을 정의합니다.

1. 상태 저장소 생성하기

import create from 'zustand'

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

위 코드는 상태 저장소를 생성하는 예제입니다. count라는 상태와 이 상태를 증가시키고 감소시키는 increase와 decrease 액션을 정의합니다.

2. 컴포넌트에서 상태 사용하기

상태 저장소를 생성한 후, React 컴포넌트에서 상태를 사용할 수 있습니다.

import React from 'react'
import { useStore } from './store'

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  )
}

export default Counter

위 코드는 Zustand 상태를 사용하는 간단한 Counter 컴포넌트 예제입니다. useStore 훅을 사용하여 상태와 액션을 가져오고, 버튼 클릭 시 상태를 업데이트합니다.

Zustand와 미들웨어 사용하기

Zustand는 미들웨어를 사용하여 상태 관리에 추가 기능을 제공할 수 있습니다. 예를 들어, 로깅 미들웨어를 추가하여 상태 변경 시 콘솔에 로그를 출력할 수 있습니다.

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

const useStore = create(devtools(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 }))
})))

위 코드는 devtools 미들웨어를 사용하여 상태 변경 시 DevTools에 상태를 기록하도록 설정합니다.

개발해해원