Zustand를 활용(3): 여러 컴포넌트 간 상태 공유

여러 컴포넌트 간 상태 공유

여러 컴포넌트 간 상태 공유

내용:

• Zustand를 사용하여 컴포넌트 간 상태 공유 방법
• 컴포넌트 간 상태 전달 없이 Zustand로 상태 접근
• 상태 관리가 필요한 애플리케이션 구조의 효율성 증대

실습:

• 여러 컴포넌트에서 Zustand 상태를 공유하는 예제 (Todo 리스트 구현)
• 하나의 상태 저장소를 사용해 컴포넌트들이 동일한 Todo 리스트 상태를 관리 및 업데이트

예제 코드:

// store.js
import create from 'zustand';

const useTodoStore = create((set) => ({
  todos: [],
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
  removeTodo: (index) => set((state) => ({
    todos: state.todos.filter((_, i) => i !== index)
  })),
}));

export default useTodoStore;

// TodoInput.js
import React, { useState } from 'react';
import useTodoStore from './store';

const TodoInput = () => {
  const [todo, setTodo] = useState('');
  const addTodo = useTodoStore((state) => state.addTodo);

  const handleAdd = () => {
    if (todo) {
      addTodo(todo);
      setTodo('');
    }
  };

  return (
    <div>
      <input value={todo} onChange={(e) => setTodo(e.target.value)} />
      <button onClick={handleAdd}>Add Todo</button>
    </div>
  );
};

export default TodoInput;

// TodoList.js
import React from 'react';
import useTodoStore from './store';

const TodoList = () => {
  const todos = useTodoStore((state) => state.todos);
  const removeTodo = useTodoStore((state) => state.removeTodo);

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          {todo}
          <button onClick={() => removeTodo(index)}>Remove</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

// App.js
import React from 'react';
import TodoInput from './TodoInput';
import TodoList from './TodoList';

function App() {
  return (
    <div>
      <h1>Todo List</h1>
      <TodoInput />
      <TodoList />
    </div>
  );
}

export default App;