Zustand를 활용한 React 상태 관리

 

안녕하세요, Jay입니다.

 

오늘은 Zustand라는 React 상태 관리 도구를 소개하려고 합니다. Zustand는 경량 상태 관리 라이브러리로, 간단한 API와 강력한 성능을 제공합니다. Redux처럼 강력하면서도 Context API처럼 간결한 사용성을 자랑하기 때문에 많은 React 개발자들에게 사랑받고 있습니다. 이 글에서는 Zustand의 특징과 사용법, 그리고 실제 예제를 통해 Zustand를 활용하는 방법을 자세히 알아보겠습니다.

---

Zustand란 무엇인가요?

Zustand는 독일어로 "상태"를 뜻하며, React 애플리케이션에서 상태 관리를 간단하게 처리할 수 있게 해주는 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다:

1. 가벼운 설치 용량: 불필요한 의존성이 없고, 코드베이스도 가볍습니다.
2. 보일러플레이트 제거: 복잡한 설정 없이도 간단히 상태를 관리할 수 있습니다.
3. Context API 대체: React의 Context API처럼 작동하지만, 더 나은 성능을 제공합니다.
4. 비동기 작업 지원: 비동기 액션도 직관적으로 처리할 수 있습니다.
5. Redux DevTools 호환: 디버깅을 쉽게 하기 위해 Redux DevTools와 통합할 수 있습니다.

---

Zustand 설치

Zustand를 설치하려면 아래 명령어를 실행하세요:

yarn add zustand

혹은

npm install zustand

설치 후, Zustand의 create 함수를 사용하여 스토어를 생성할 수 있습니다.

---

기본 사용법

Zustand의 기본 사용법은 매우 간단합니다. 아래는 상태를 정의하고 사용하는 간단한 예제입니다:

import { create } from 'zustand';

// Zustand 스토어 생성
const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

function App() {
  const { count, increase, decrease } = useStore();

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

export default App;

코드 설명

1. create 함수: Zustand의 핵심 함수로, 스토어를 생성합니다.
2. set 함수: 상태를 업데이트하는 데 사용됩니다.
3. useStore 훅: 컴포넌트에서 상태와 액션을 가져오는 데 사용됩니다.

---

Zustand의 주요 기능

1. 리액티브 상태 관리

Zustand는 상태가 변경되면 자동으로 컴포넌트를 다시 렌더링합니다. React의 상태 관리 방식과 비슷하지만, 더 간결한 코드로 이를 구현할 수 있습니다.

2. 미들웨어 지원

Zustand는 미들웨어를 통해 상태를 확장할 수 있습니다. Redux DevTools를 통합하거나 로깅 기능을 추가하는 등 다양한 작업이 가능합니다.

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

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

3. 비동기 액션

Zustand는 비동기 작업도 간단히 처리할 수 있습니다. 예를 들어, API 호출 결과를 상태에 저장하려면 아래와 같이 작성할 수 있습니다:

const useStore = create((set) => ({
  data: null,
  fetchData: async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    set({ data });
  },
}));

---

실전 예제: Todo 리스트 구현

아래는 Zustand를 활용하여 간단한 Todo 리스트를 구현한 예제입니다:

import { create } from 'zustand';

const useTodoStore = create((set) => ({
  todos: [],
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, { id: Date.now(), ...todo }] })),
  removeTodo: (id) => set((state) => ({ todos: state.todos.filter((todo) => todo.id !== id) })),
}));

function TodoApp() {
  const { todos, addTodo, removeTodo } = useTodoStore();
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      addTodo({ text: newTodo, completed: false });
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => removeTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

특징

• 간결한 상태 정의: 상태와 액션을 한 곳에서 관리합니다.
• 빠른 업데이트: Todo 추가/삭제가 즉각적으로 반영됩니다.

---

Zustand vs Redux

특성	Zustand	Redux
설정 복잡도	간단함	비교적 복잡함
보일러플레이트	거의 없음	많음
DevTools 지원	지원 (Redux DevTools와 호환)	기본적으로 지원
미들웨어 사용	간단하게 통합 가능	추가 설정 필요
러닝 커브	낮음	높음

---

마무리

Zustand는 간단하면서도 강력한 React 상태 관리 도구입니다. 특히 소규모 프로젝트나 간단한 상태 관리가 필요한 경우에 매우 유용합니다. Redux의 복잡함이나 Context API의 성능 문제로 고민 중이라면 Zustand를 고려해보세요.

 

Zustand를 활용해 더 간결하고 효율적인 React 개발을 경험해보시기 바랍니다. 😊