React로 Todo List 만들기 (추가, 수정, 삭제 기능 포함) 📑

import { useState } from "react";

function App() {

  const [todo, setTodo] = useState("");

  const [todos, setTodos] = useState([]);

  const [editingTodoId, setEditingTodoId] = useState(null);

  const [editingTodoContent, setEditingTodoContent] = useState("");

  const onChange = (event) => setTodo(event.target.value);

  //추가

  const onSubmit = (event) => {

    event.preventDefault();

    if (todo.trim() === "") {

      return;

    }

    setTodos((cur) => [...cur, { id: cur.length, content: todo }]);

    setTodo("");

  };

  //삭제

  const handleTodoDelete = (todoId) => {

    setTodos((cur) => cur.filter((todo) => todo.id !== todoId));

  };

  //수정

  const handleTodoEdit = (todoId, todoContent) => {

    setEditingTodoId(todoId);

    setEditingTodoContent(todoContent);

  };

  const handleEditingTodoChange = (event) => {

    setEditingTodoContent(event.target.value);

  };

  //수정 후 저장

  const handleEditingTodoSubmit = (event, todoId, todoContent) => {

    event.preventDefault();

    const updatedTodos = todos.map((todo) => {

      if (todo.id === todoId) {

        return { ...todo, content: todoContent };

      }

      return todo;

    });

    setTodos(updatedTodos);

    setEditingTodoId(null);

    setEditingTodoContent("");

  };

  //수정 취소

  const handleEditingTodoCancel = () => {

    setEditingTodoId(null);

    setEditingTodoContent("");

  };

  return (

    <div>

      <h1>My Todo list ({todos.length})</h1>

      <form onSubmit={onSubmit}>

        <input

          type="text"

          placeholder="write your to do.."

          value={todo}

          onChange={onChange}

        />

        <button>추가</button>

      </form>

      <ul>

        {todos.map((todo) => (

          <li key={todo.id}>

            {editingTodoId === todo.id ? ( //수정 중이 아닐 때

              <form

                onSubmit={(event) =>

                  handleEditingTodoSubmit(

                    event,

                    editingTodoId,

                    editingTodoContent

                  )

                }

              >

                <input

                  type="text"

                  value={editingTodoContent}

                  onChange={handleEditingTodoChange}

                />

                <button type="submit">저장</button>

                <button type="button" onClick={handleEditingTodoCancel}>

                  취소

                </button>

              </form>

            ) : (

              //수정 중일 때

              <>

                <label>

                  <input type="checkbox" />

                  <span>{todo.content}</span>

                </label>

                <button

                  type="button"

                  onClick={() => handleTodoEdit(todo.id, todo.content)}

                >

                  수정

                </button>

                <button type="button" onClick={() => handleTodoDelete(todo.id)}>

                  삭제

                </button>

              </>

            )}

          </li>

        ))}

      </ul>

    </div>

  );

}

export default App;

 

- const [todo, setTodo] = useState(""); 는 상태(state)를 선언하고 초기값으로 빈 문자열("")을 할당한다. 새로 추가되는 할 일이 todo에 들어간다.

- const [todos, setTodos] = useState([]); 는 상태(state)를 선언하고 초기값으로 빈 배열([])을 할당한다. todos에는 할 일 목록이 저장된다.

- const [editingTodoId, setEditingTodoId] = useState(null); 는 상태(state)를 선언하고 초기값으로 null을 할당한다. editingTodoId에는 현재 수정 중인 할 일의 ID를 저장한다.

 

- const [editingTodoContent, setEditingTodoContent] = useState(""); 는 상태(state)를 선언하고 초기값으로 빈 문자열("")을 할당한다. editingTodoContent에는 현재 수정 중인 할 일의 내용을 저장한다.

- const onChange = (event) => setTodo(event.target.value); 는 입력창에 값을 입력할 때마다 setTodo 함수를 호출하여 todo 상태를 업데이트한다. 이는 입력창의 onChange 이벤트 핸들러로 사용된다.

- const onSubmit = (event) => {...} 는 할 일을 추가할 때 호출되는 함수다. 이 함수는 form 요소의 onSubmit 이벤트 핸들러로 사용된다. 먼저 event.preventDefault()를 호출하여 페이지가 새로고침되는 것을 방지한다. 그리고 입력창의 값이 비어있는지 체크한 후, todos 상태를 업데이트한다. todos는 현재 목록에 새로 추가된 todo가 합쳐지는데 현재 목록의 길이를 id 값, 새로 추가된 todo의 내용이 content에 들어간다. 합친 후에는 todo를 빈 문자열로 만든다.

 

- const handleTodoDelete = (todoId) => {...} 는 할 일을 삭제할 때 호출되는 함수다. 이 함수는 삭제 button 의 onClick 이벤트 핸들러로 사용된다. setTodos 함수를 사용해 todos 배열에서 todoId와 일치하지 않는 할 일들로 새로운 배열을 만들어 업데이트한다. 이때 filter로 삭제할 할 일을 걸러낸다.

- const handleTodoEdit = (todoId, todoContent) => {...} 는 할 일을 수정할 때 호출되는 함수다. 수정 button 의 onClick 이벤트 핸들러로 사용된다. 현재 수정 중인 할 일의 ID와 내용을 editingTodoId와 editingTodoContent 상태에 저장한다.

 

- const handleEditingTodoChange = (event) => setEditingTodoContent(event.target.value); 는 수정 중인 할 일의 내용이 변경될 때마다 호출되는 함수다. 이 함수는 수정 중인 할 일의 내용을 업데이트하기 위해 setEditingTodoContent 함수를 호출한다.

- const handleEditingTodoSubmit = (event, todoId, todoContent) => {...} 는 수정된 할 일 내용을 저장하기 위해 호출되는 함수다. 이 함수는 수정된 할 일의 내용과 해당 할 일의 ID를 매개변수로 받는다. 함수 내부에서는 event.preventDefault()를 호출하여 폼의 기본 동작인 페이지 새로고침을 방지한다. 그리고 todos 배열에서 해당 할 일의 ID를 가진 항목을 찾아서 수정된 할 일 내용으로 업데이트하고, 이를 setTodos 함수를 사용하여 새로운 배열로 설정한다. 마지막으로 setEditingTodoId와 setEditingTodoContent 함수를 호출하여 수정 중인 할 일의 ID와 내용을 초기화한다.

- const handleEditingTodoCancel = () => {...} 는 수정 작업을 취소하고 원래 할 일 내용을 유지하기 위해 호출되는 함수다. 이 함수는 setEditingTodoId와 setEditingTodoContent 함수를 호출하여 수정 중인 할 일의 ID와 내용을 초기화한다.