React와 Tailwind CSS를 사용한 쉬운 Todo 목록 앱

이 블로그 게시물에서는 React와 TailwindCSS를 사용하여 간단한 Todo List 애플리케이션을 구축하는 과정을 안내해 드리겠습니다. 이 프로젝트는 상태 관리를 위해 React에 대해 더 깊이 알아보고 유틸리티 우선 CSS 프레임워크인 TailwindCSS를 사용하여 구성 요소의 스타일을 지정하는 방법을 배우고 싶은 초보자에게 적합합니다.

프로젝트 개요

이 프로젝트의 목표는 사용자가 다음을 수행할 수 있는 기본 Todo 목록을 만드는 것입니다.

• 새 작업을 추가하세요.

• 완료된 작업과 완료되지 않은 작업 사이를 전환합니다.

• 더 이상 필요하지 않은 작업을 삭제하세요.

React의 상태 관리 기능을 활용하고 TailwindCSS를 사용하여 모든 스타일을 지정하겠습니다.

1단계: 프로젝트 설정

먼저 create-react-app을 사용하여 React 프로젝트를 설정하고 TailwindCSS를 설치하겠습니다.

• React 앱 만들기:

npx create-react-app todo-list
cd todo-list

• TailwindCSS 설치: TailwindCSS는 자동 브라우저 호환성을 위해 PostCSS 및 autoprefixer와 함께 설치되어야 합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

• Tailwind 구성: tailwind.config.js에서 React 앱의 파일을 가리키도록 콘텐츠 섹션을 업데이트합니다.

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

• CSS에 Tailwind 포함: src/index.css에서 TailwindCSS 지시문을 가져옵니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

이제 TailwindCSS가 React 앱에 완전히 통합되었습니다!

2단계: Todo 목록 구성요소 생성

다음으로 사용자가 작업을 추가, 삭제, 전환할 수 있는 Todo List 구성 요소를 만들어 보겠습니다.

TodoList.js 구성 요소의 핵심 구조는 다음과 같습니다.

import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const toggleTaskCompletion = (index) => {
    const updatedTasks = tasks.map((task, i) =>
      i === index ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-4 bg-white rounded-lg shadow-lg">
      <h1 className="text-2xl font-bold mb-4">Todo List</h1>
      <div className="flex mb-4">
        <input
          type="text"
          className="flex-1 p-2 border rounded"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task..."
        />
        <button
          onClick={addTask}
          className="ml-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Add
        </button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index} className="flex justify-between items-center mb-2">
            <span
              className={`flex-1 ${task.completed ? 'line-through text-gray-500' : ''}`}
              onClick={() => toggleTaskCompletion(index)}
            >
              {task.text}
            </span>
            <button
              onClick={() => deleteTask(index)}
              className="ml-4 p-1 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

3단계: 구성 요소를 앱에 통합

TodoList 구성 요소가 준비되면 이를 기본 App.js 파일에 통합하세요. 방법은 다음과 같습니다.

import './App.css';
import TodoList from './components/TodoList';

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

export default App;

4단계: 작업 테스트!

달리기:

npm start

다음과 같이 Todo 목록 페이지의 기본 레이아웃을 볼 수 있습니다.

할 일 입력:

할 일을 추가하려면 추가 버튼을 클릭하세요.

완료된 작업 전환:

삭제 버튼을 클릭하여 더 이상 원하지 않는 작업을 삭제하세요.

결론

React 및 TailwindCSS를 사용하여 이 Todo 목록을 구축하는 것은 React와 같은 구성 요소 기반 라이브러리를 유틸리티 우선 CSS 프레임워크와 결합하는 힘을 입증하는 데 도움이 되었습니다. Tailwind의 간단하고 직관적인 스타일과 결합된 React의 상태 관리를 통해 반응성이 뛰어난 대화형 애플리케이션을 빠르게 만들 수 있었습니다.

다음을 통해 이 앱을 계속해서 개선할 수 있습니다.

• 페이지 새로고침 사이에 작업이 저장되도록 localStorage에서 작업을 유지합니다.

• 작업에 마감일 또는 우선순위 수준을 추가합니다.

• 더 복잡한 스타일과 애니메이션으로 디자인 확장.

읽어주셔서 감사합니다! 이 프로젝트를 통해 React와 TailwindCSS를 더 많이 탐색할 수 있었으면 좋겠습니다.

위 내용은 React와 Tailwind CSS를 사용한 쉬운 Todo 목록 앱의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!