[Zustand] Zustand로 상태관리를 해보자!

 

많은 상태관리 라이브러리 중 요즘 떠오르는 'Zustand'.

 

 

npm trends 사이트를 가서 검색을 해보니 역시 1위는 redux지만 놀랍게도 2위가 Zustand다.

2년전만해도 recoil이 막 뜬다. 라는 소문이 있어서 사용해봤는데... 이젠 저 밑에 있네..

(recoil 만드신 개발자분도 퇴사했다는 소식이......)

 

 

그래서 Zustand가 왜 인기가 있는데? 무슨 라이브러리인데?

Zustand는 독일어로 '상태'라는 뜻을 가진 라이브러리로,

간결한 플럭스(Flux) 원칙을 바탕으로 작고 빠르게 확장 가능한 상태 관리 라이브러리이다.

한 개의 중앙에 집중된 형식의 스토어 구조를 활용하고 보일러 플레이트가 최소화되어 있어 스토어 형태임에도 굉장히 간단하게 상태관리를 할 수 있다.

 

또한,

• useSelector hook을 제공하여 컴포넌트가 필요한 상태만 선택적으로 구독 => Provider로 감쌀 필요 X
• memoization을 사용해 컴포넌트가 리렌더링될 때마다 컴포넌트 재실행을 방지 => Context API보다 리렌더링 감소

그렇다.

redux를 사용해보면 많은 장점이 있지만 적어야하는 수많은 보일러 플레이트 코드에 다소 피로감을 느끼게 된다.

그런 단점을 보완하는 역할을 하는 것이 Zustand인 것같다.

 

 

Zustand를 사용해보자

설치방법은 간단하다.

# NPM
npm install zustand
# Or, use any package manager of your choice.

 

설치를 하면 store.js 파일을 생성 후, create 함수를 통해 store를 생성해주면 된다.

import { create } from 'zustand'

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

 

스토어는 상태 변수와 해당 상태를 업데이트하는 액션(함수)으로 구성되어 있다.

이렇게 만든 상태 변수와 액션(함수)를 사용하려면 해당 컴포넌트에서 useStore 함수를 호출하면 된다.

import { useStore } from "./store/store";

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

 

 

Zustand를 활용한 Todo App

 

store.ts

import { create } from "zustand";

interface TodosType {
  id: number;
  text: string;
  isDisabled: boolean;
  isChecked: boolean;
}

interface Store {
  Todos: TodosType[];
  addTodo: (todo: string) => void;
  remove: (id: number) => void;
  updateDisabled: (id: number, disabled: boolean) => void;
  updateChecked: (id: number, check: boolean) => void;
  update: (id: number, newText: string) => void;
}

//store 생성
export const useStore = create<Store>((set) => ({
  Todos: [{ id: 0, text: "공부하기", isDisabled: true, isChecked: false }],
  addTodo: (todo: string) =>
    set((state) => {
      const lastId = state.Todos.length > 0 ? state.Todos[0].id : 0;
      const newId = lastId + 1;
      const newTodo = { id: newId, text: todo, isDisabled: true };
      return { Todos: [newTodo, ...state.Todos] };
    }),
  remove: (id: number) =>
    set((state) => ({ Todos: state.Todos.filter((v, i) => v.id !== id) })),
  updateDisabled: (id: number, disabled: boolean) =>
    set((state) => ({
      Todos: state.Todos.map((todo) =>
        todo.id === id ? { ...todo, isDisabled: disabled } : todo
      ),
    })),
  update: (id: number, newText: string) =>
    set((state) => ({
      Todos: state.Todos.map((todo) =>
        todo.id === id ? { ...todo, text: newText } : todo
      ),
    })),
  updateChecked: (id: number, check: boolean) =>
    set((state) => ({
      Todos: state.Todos.map((todo) =>
        todo.id === id ? { ...todo, isChecked: check } : todo
      ),
    })),
}));

 

page.tsx

"use client";

import { useStore } from "./store/store";
import { useState } from "react";
import {
  MdOutlineCheckBoxOutlineBlank,
  MdOutlineCheckBox,
  MdRocketLaunch,
  MdCheck,
  MdDelete,
  MdEdit,
} from "react-icons/md";

export default function Home() {
  const [todo, setTodo] = useState("");
  const { Todos, addTodo, remove, updateDisabled, update, updateChecked } =
    useStore((state) => state);

  const handleAdd = () => {
    if (!todo) return alert("Please enter a todo");
    addTodo(todo);
    setTodo("");
  };

  return (
    <main>
      <div className="w-full bg-indigo-50 text-center min-h-screen">
        <h1 className="text-5xl font-bold pt-10 pb-5">Hello Todo App!</h1>
        <div className="p-10 flex items-center">
          <input
            className="w-5/6 placeholder:text-gray-400 border-0 p-5 rounded-l-lg focus:outline-none"
            placeholder="your todo here"
            value={todo}
            onChange={(e) => setTodo(e.target.value)}
          />
          <button
            className="w-1/6 bg-indigo-200 rounded-r-lg p-5"
            onClick={handleAdd}
          >
            <div className="flex items-center justify-center">
              <MdRocketLaunch size="24" />
            </div>
          </button>
        </div>

        <div className="px-10">
          {Todos.map((todo, index) => (
            <div className="flex pt-5" key={todo.id}>
              <div className="flex-none mr-2 content-center">
                {todo.isChecked ? (
                  <button onClick={() => updateChecked(todo.id, false)}>
                    <MdOutlineCheckBox size="30" />
                  </button>
                ) : (
                  <button onClick={() => updateChecked(todo.id, true)}>
                    <MdOutlineCheckBoxOutlineBlank size="30" />
                  </button>
                )}
              </div>
              <input
                className="flex-1 placeholder:text-gray-400 border-0 p-5 rounded-lg focus:outline-none w-16 md:w-32 lg:w-48"
                disabled={todo.isDisabled}
                value={todo.text}
                onChange={(e) => update(todo.id, e.target.value)}
              />
              {todo.isDisabled ? (
                <button
                  className="flex-none mx-4 bg-indigo-200 p-5 rounded-lg"
                  onClick={() => updateDisabled(todo.id, false)}
                >
                  <div className="flex items-center justify-center">
                    <MdEdit size="30" />
                  </div>
                </button>
              ) : (
                <button
                  className="flex-none mx-4 bg-indigo-200 p-5 rounded-lg"
                  onClick={() => updateDisabled(todo.id, true)}
                >
                  <div className="flex items-center justify-center">
                    <MdCheck size="30" />
                  </div>
                </button>
              )}
              <button
                className="flex-none bg-indigo-200 p-5 rounded-lg"
                onClick={() => remove(todo.id)}
              >
                <div className="flex items-center justify-center">
                  <MdDelete size="30" />
                </div>
              </button>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}

 

간단하게 Zustand의 사용법을 익히기 위해 todo App을 만들어봤는데,

(너무 작은 토이프로젝트라서 아직 잘 아는건 아니지만........)

확실히 다른 상태관리 라이브러리보다 사용하는 법도 간단하고 프엔을 좀 다루는 사람이라면 쉽게 배울 수 있을 것 같다.

 

앞으로 Zustand를 사용한 여러 프로젝트를 만들어봐야겠다.

 

 

 

 

 

참고

Zustand Documentation (pmnd.rs)

Zustand Documentation

[React] Zustand 라이브러리를 사용하여 상태 관리하기 (JS/TS) (velog.io)

[React] Zustand 라이브러리를 사용하여 상태 관리하기 (JS/TS)

후니네 개발하우스 | 넌 상태관리를 어떻게 해? 난 Zustand를 활용하고 있어! (hooninedev.com)