Reactjs Todo List 앱(Vite 및 조건 사용)

ReactJS 애플리케이션을 구축할 때 앱이 확장됨에 따라 상태를 효율적으로 관리하는 것이 중요합니다. React에 내장된 상태 관리는 소규모 앱에는 적합하지만 규모가 크거나 복잡한 애플리케이션에는 외부 상태 관리 라이브러리가 필요한 경우가 많습니다.
Zustand는 복잡성을 추가하지 않고도 React 애플리케이션에서 전역 상태를 관리하는 데 도움이 되는 가볍고 빠르며 최소한의 상태 관리 라이브러리 중 하나입니다.

이 블로그에서는 Vite를 사용하여 구축된 간단한 Todo List 앱에서 Zustand를 사용하는 방법을 알아봅니다.

프로젝트 진행 상황은 다음과 같습니다.

Zustand란 무엇인가요?

Zustand는 React를 위한 작고 빠른 상태 관리 라이브러리입니다. Redux와 같은 다른 상태 관리 라이브러리에 비해 간단한 API를 제공하므로 중소 규모 애플리케이션에 더욱 사용자 친화적입니다.

왜 Zusstand인가요?

• 단순성: Zustand는 상태 작업을 위한 간단하고 최소한의 API를 제공합니다.
• 성능: Zustand는 변경된 특정 상태를 사용하는 구성 요소에서만 다시 렌더링을 트리거합니다.
• 상용구 없음: Redux와 달리 Zustand는 상태 관리를 위해 리듀서, 액션 또는 미들웨어가 필요하지 않습니다.

Zustand 및 Vite 시작하기

1단계: Vite로 새 프로젝트 만들기
먼저 빠르고 현대적인 빌드 도구인 Vite를 사용하여 React 프로젝트를 설정해 보겠습니다.

# Create a new Vite project
npm create vite@latest todo-app-zustand --template react

그런 다음 터미널에서 아래 단계를 따르세요.

그런 다음 아래 명령을 따르세요.

# Move into the project directory
cd todo-app-zustand

# Install dependencies
npm install

Vite는 이제 상용구 React 앱을 만들었습니다. 다음을 사용하여 앱을 실행할 수 있습니다.

npm run dev

브라우저에서 http://localhost:5173을 열어 새 Vite 앱이 실행되는지 확인하세요.

---

2단계: Zustand 설치
이제 Todo 목록 앱의 상태를 관리하기 위해 Zustand를 설치해 보겠습니다.

npm install zustand

---

3단계: 상태 관리를 위한 Zustand 설정

src 디렉터리에 store라는 새 폴더를 만들고 그 안에 todoStore.js 파일을 추가하세요. 이 파일에는 Zustand 매장이 저장됩니다.

// src/store/todoStore.js
import { create } from 'zustand';

const useTodoStore = create((set) => ({
  todos: [],

  // Add a new todo
  addTodo: (todo) =>
    set((state) => ({
      todos: [...state.todos, { id: Date.now(), text: todo, completed: false }],
    })),

  // Remove a todo by ID
  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((todo) => todo.id !== id),
    })),

  // Toggle a todo's completion status
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      ),
    })),
}));

export default useTodoStore;

• addTodo: 목록에 새 할일을 추가합니다.
• RemoveTodo: 고유 ID로 할일을 제거합니다.
• ggleTodo: 할 일의 완료 상태를 전환합니다.

---

4단계: Todo 목록 구성 요소 생성
이제 Zustand의 상태와 상호작용하는 TodoList 컴포넌트를 생성하겠습니다.

// src/components/TodoList.jsx
import React, { useState } from 'react';
import useTodoStore from '../store/todoStore';

const TodoList = () => {
  const { todos, addTodo, removeTodo, toggleTodo } = useTodoStore();
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      addTodo(newTodo);
      setNewTodo(''); // Clear the input after adding
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={handleAddTodo}>Add</button>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
                cursor: 'pointer',
              }}
              onClick={() => toggleTodo(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

여기서는 useTodoStore 후크를 사용하여 다음을 수행합니다.

• 할 일 목록을 가져옵니다.
• 새 할 일을 추가하세요.
• 할 일의 완료 상태를 전환합니다.
• 할 일 삭제

---

5단계: 앱에 TodoList 구성 요소 추가
이제 기본 App.jsx 파일에 TodoList 구성 요소를 추가해야 합니다.

// src/App.jsx
import React from 'react';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

---

6단계: 스타일링(선택사항)
선택적으로 선호하는 CSS 프레임워크를 사용하여 앱 스타일을 지정하거나 Tailwind CSS 또는 Bootstrap을 설치하여 사용할 수도 있습니다.

간단함을 위해 index.css에 직접 몇 가지 기본 스타일을 추가해 보겠습니다.

/* src/index.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

h1 {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
  background: #ff4757;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}

input {
  margin-right: 10px;
  padding: 5px;
  width: 300px;
}

---

7단계: 앱 실행
다음을 사용하여 앱을 실행하세요.

npm run dev

이제 다음 작업을 수행할 수 있는 기능적인 Todo 목록이 표시됩니다.

• 새 할 일을 추가하세요.
• 할 일을 클릭하여 완료 또는 미완료로 표시하세요.
• 할 일을 삭제하세요.

결론:
이 튜토리얼에서는 상태 관리를 위해 React 및 Zustand를 사용하여 간단한 Todo List 앱을 구축했습니다.

• Zustand의 단순성과 성능 덕분에 중소 규모 애플리케이션의 상태 관리에 탁월한 선택입니다.
• Redux와 같은 다른 상태 관리 솔루션에 비해 훨씬 적은 양의 상용구가 필요합니다.
• Zustand를 사용하면 불필요한 복잡성 관리에 대한 걱정 없이 애플리케이션 로직 구축에 집중할 수 있습니다.

이 블로그는 여기까지입니다! 더 많은 업데이트를 기대하고 계속해서 놀라운 앱을 만들어 보세요! ?✨
즐거운 코딩하세요! ?

위 내용은 Reactjs Todo List 앱(Vite 및 조건 사용)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!