[React] React로 할 일 관리 앱 만들기: 3장 - 할 일 삭제와 완료 기능

 

안녕하세요! 이번 포스트에서는 우리의 할 일 관리 앱에 할 일 삭제와 완료 표시 기능을 추가해 보겠습니다.

1. 할 일 삭제 기능 구현

먼저 TodoList 컴포넌트에 할 일을 삭제하는 기능을 추가해 보겠습니다.

// src/components/TodoList.js
import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  // ... 이전 코드 ...

  const handleDelete = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      {/* ... 이전 코드 ... */}
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.text}</span>
            <button onClick={() => handleDelete(todo.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

handleDelete 함수는 filter 메서드를 사용하여 삭제할 항목을 제외한 새로운 배열을 생성합니다.

2. 할 일 완료 표시 기능 구현

이제 할 일을 완료했음을 표시할 수 있는 기능을 추가해 보겠습니다.

function TodoList() {
  // ... 이전 코드 ...

  const handleToggle = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      {/* ... 이전 코드 ... */}
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggle(todo.id)}
            />
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => handleDelete(todo.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

handleToggle 함수는 map 메소드를 사용하여 해당할 일의 completed 상태를 토글합니다.

3. 스타일 개선

앱의 외관을 조금 개선해 보겠습니다. src/App.css 파일에 다음 스타일을 추가합니다:

.App {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

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

li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

li span {
  flex-grow: 1;
  margin-left: 10px;
}

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

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

4. 최종 TodoList 컴포넌트

모든 기능을 합친 최종 TodoList 컴포넌트는 다음과 같습니다:

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
      setInputValue('');
    }
  };

  const handleDelete = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const handleToggle = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <h2>할 일 목록</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="새로운 할 일을 입력하세요"
        />
        <button type="submit">추가</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggle(todo.id)}
            />
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => handleDelete(todo.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

실행 결과

이제 npm start 명령어로 앱을 실행하면, 할 일을 추가하고, 완료 표시를 하거나, 삭제할 수 있는 기능이 모두 구현된 것을 확인할 수 있습니다.

다음 단계

기본적인 CRUD(Create, Read, Update, Delete) 기능을 모두 구현했습니다. 다음 챕터에서는 할 일 항목을 수정하는 기능과 로컬 스토리지를 사용하여 데이터를 저장하는 방법에 대해 알아보겠습니다.