예제로 배워보는 zustand

프로젝트에 zustand를 적용하기에 앞서, 예제를 몇 가지 보면서 개념을 익혀보려고 한다.

1. 버튼을 누르면 올라가거나, 내려가는 카운터 예제

const Counter = create((set) => {
//초깃값
  count: 0,
    //증가값, 감소값
  increament: () => set((state) => ({count: state.count + 1}))
  decreament: () => set((state) => ({count: state.count - 1}))
})

function CounterNumber() {
	const { count, increment, decrement } = Counter();
}

return (
<div>
  <h1>count : {count}</h1>
<button onClick = {increment}>increment</button>
<button onClick = {decrement}>decrement</button>
  </div>
)

2. 간단한 todolist

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

  const handleAddTodo = () => {
    const newTodo = { id: Date.now(), text: 'New Todo' };
    addTodo(newTodo);
  };

  const handleRemoveTodo = (id) => {
    removeTodo(id);
  };

  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}{' '}
            <button onClick={() => handleRemoveTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}