Zustandの紹介と基本操作：基礎からアーキテクチャ設計まで1

Prop drilling

• とてもシンプル
  Reduxのような複雑な設定や定型コードはほとんどありません。数行でストアを作って使えます。
• Providerが不要
  Context APIと異なり、アプリ全体をProviderで囲む必要がなく、コードをすっきり保てます。
• フックを基盤にする
  useStateと同じようにフックを呼び、状態と更新関数を取得する直感的な仕組みです。
• 再レンダリングの最適化
  状態の必要な部分だけを購読し、不要な再レンダリングを自動で防ぎます。

npm install zustand

import { create } from 'zustand'
 
const useCounterStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))
 
export default useCounterStore

• zustandからcreateをインポートします。
• createへ設定関数を渡します。その引数setは状態を更新する関数です。
• ストアに数値のcountと、このcountを変更するincrease、decrease、resetを定義しました。
• setを呼ぶ際、現在のstateを受け取り、新しい状態オブジェクトを返して安全に更新します。

import React from 'react'
import useCounterStore from './store'
 
function Counter() {
  const { count, increase, decrease, reset } = useCounterStore()
 
  return (
    <div>
      <h1>카운터</h1>
      <p>{count}</p>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
      <button onClick={reset}>리셋</button>
    </div>
  )
}
 
export default Counter

• 作成したuseCounterStoreをコンポーネントへインポートします。
• useCounterStore()を呼ぶと、すべての状態と関数をオブジェクトとして取得できます。
• useStateと同じようにcountを表示し、各ボタンのonClickへincreaseとdecreaseを関連付けました。

• ローカル状態（Local State）
  • 特定コンポーネント内だけで使い、ほかと共有する必要がない状態です。
  • 例：フォームの入力値、モーダルの開閉など。
  • React標準のuseStateやuseReducerで管理するのが適しています。
• グローバル状態（Global State）
  • 複数のコンポーネントが共有し、アクセスする状態です。
  • 例：ログイン中のユーザー情報、ダークモードなどのテーマ、カートの商品一覧。
  • このような場合にZustandなどの状態管理ライブラリを使います。

次回は、中心となるselectorとshallow、ストアを操作するさまざまな関数を詳しく見ていきます。

• Zustand公式ドキュメント↗