인프런 커뮤니티 질문&답변

복습하면서 강의를 보지 않고 저 혼자 다시 만들어보고 있는 중입니다. 그래서 드래그 라이브러리나 React.memo 같은 기능은 우선 차치하고 CRUD 기능만 해보려고 하는데요.

edit을 위한 💬 버튼을 누를 경우 다른 할 일들도 editing... 으로 전체 수정되는 오류가 있습니다 ㅠㅠ 어디가 꼬였는지 알 수 없어 몇 시간 째 헤매고 있는데, 어느 부분이 문제인지 알 수 있을까요? Lists 컴포넌트에서 문제가 발생하고 있습니다.

App.js

import React, { useState } from "react";
import Form from "./components/Form";
import Lists from "./components/Lists";

function App() {
  const today = new Date();
  const month = today.getMonth() + 1;
  const day = today.getDate();

  const [value, setValue] = useState("");
  const [todoData, setTodoData] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();

    let newTodo = {
      id: Date.now(),
      title: value,
      done: false,
    };

    setTodoData([...todoData, newTodo]);
    setValue("");
  };

  const handleClear = () => {
    setTodoData([]);
  };
  return (
    <div className="flex justify-center items-center min-h-screen w-screen bg-purple-100">
      <div className="w-full lg:max-w-lg lg:max-w-3/4 p-6 m-4 bg-white rounded shadow">
        <div className="flex justify-between pb-2">
          <h1>
            📌 {month}월 {day}일 오늘의 할 일
          </h1>
          <button onClick={handleClear}>🧹 전체 삭제</button>
        </div>
        <Lists todoData={todoData} setTodoData={setTodoData} />
        <Form handleSubmit={handleSubmit} value={value} setValue={setValue} />
      </div>
    </div>
  );
}

export default App;

Lists.js

import React, { useState } from "react";

const Lists = ({ todoData, setTodoData, title, id }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedTitle, setEditedTitle] = useState(title);

  const handleDelete = (id) => {
    let newTodoData = todoData.filter((data) => data.id !== id);
    setTodoData(newTodoData);
  };

  const handleDone = (id) => {
    let newTodoData = todoData.map((data) => {
      if (data.id === id) {
        data.done = !data.done;
      }
      return data;
    });
    setTodoData(newTodoData);
  };

  if (isEditing) {
    return <div>Editing...</div>;
  } else {
    return (
      <div>
        {todoData.map((data) => (
          <div
            className="flex py-2 my-2 justify-between items-center border rounded bg-purple-50"
            key={data.id}
          >
            <div className="mr-2 p-2">
              <input
                className="mr-2"
                type="checkbox"
                defaultChecked={data.done}
                onChange={() => handleDone(data.id)}
              ></input>
              <span className={data.done ? "line-through" : undefined}>
                {data.title}
              </span>
            </div>
            <div className="pr-2">
              <button className="mr-2" onClick={() => setIsEditing(true)}>
                💬 //오류 발생
              </button>
              <button className="mr-2" onClick={() => handleDelete(id)}>
                ❌
              </button>
            </div>
          </div>
        ))}
      </div>
    );
  }
};

export default Lists;

Form.js

import React from "react";

const Form = ({ handleSubmit, value, setValue }) => {
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <form className="flex justify-between pt-2" onSubmit={handleSubmit}>
        <input
          className="p-2 mr-2 border-2 rounded shadow w-full"
          type="text"
          placeholder="할 일을 입력하세요"
          value={value}
          onChange={handleChange}
        />
        <input
          className="p-2 border-2 rounded bg-purple-200 text-white hover:bg-purple-300"
          type="submit"
          value="입력"
        />
      </form>
    </div>
  );
};

export default Form;