Zustand 알아보기

 

Zustand 📖

Zustand는 React 애플리케이션에서 상태 관리를 쉽게 할 수 있게 도와주는 가벼운 상태 관리 라이브러리입니다.

설치

yarn add zustand

 

사용 방법

사용 방법은 이게 끝입니다! 정말 간단하죠!

// src > store > bearsStore.js
import { create } from "zustand";

const useBearsStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearsStore;

// src > App.jsx
import "./App.css";
import useBearsStore from "./store/bearsStore";

function App() {
  const bears = useBearsStore((state) => state.bears);
  const increasePopulation = useBearsStore((state) => state.increasePopulation);
  return (
    <div>
      <h1>{bears} around here ...</h1>
      <button onClick={increasePopulation}>one up</button>
    </div>
  );
}
export default App;

 

immer

zustand의 간편한 상태 업데이트 방식은 깊은 중첩 구조를 가지는 상태를 업데이트할 때 문제가 발생할 수 있습니다. 배열이나 객체의 중첩된 상태를 업데이트할 때 불변성을 유지하지 않으면 예기치 못한 오류가 발생할 수 있습니다.

import create from "zustand";

// Zustand 스토어 생성
const useTodosStore = create((set) => ({
  todos: [],
  addTodo: (text) =>
    set((state) => {
      // 불변성을 어기는 예시: 직접 배열을 수정
      state.todos.push({ id: Date.now(), text, completed: false });
      return state;
    }),
  toggleTodo: (id) =>
    set((state) => {
      // 불변성을 어기는 예시: 직접 객체를 수정
      const todo = state.todos.find((todo) => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
      return state;
    }),
}));

export default useTodosStore;

 

`immer`는 javascript에서 상태를 쉽게 변경할 수 있게 해주는 라이브러리입니다.

 

원본 데이터를 변경하지 않고도 마치 직접 수정하는 것처럼 코드를 작성할 수 있으며, `immer`가 자동으로 불변성을 유지한 새 상태를 만들어줍니다.

 

먼저 immer 라이브러리를 설치해 주고

yarn add immer

 

immer를 감싸주게 되면 끝입니다.

import create from "zustand";
import { immer } from "zustand/middleware/immer";

// Zustand 스토어 생성
const useTodosStore = create(
 immer((set) => ({
    todos: [],
    addTodo: (text) =>
      set((state) => {
        // 불변성을 어기는 예시: 직접 배열을 수정
        state.todos.push({ id: Date.now(), text, completed: false });
        return state;
      }),
    toggleTodo: (id) =>
      set((state) => {
        // 불변성을 어기는 예시: 직접 객체를 수정
        const todo = state.todos.find((todo) => todo.id === id);
        if (todo) {
          todo.completed = !todo.completed;
        }
        return state;
      }),
  }))
);

export default useTodosStore;

 

 

 

✨ Zustand 동작 원리가 궁금하다면

Zustand 동작 원리 알아보기