[DAY25] React useState를 이용하여 Update 기능 구현하기

import React from 'react'

function App() {
  const [todoItems, setTodoItems] = useState([
    {
      id: 1,
      title: "할수있다 똥닦기!",
      content: "유투브에 검색",
      isDone: false,
      edit: false,
    },
    {
      id: 2,
      title: "리액트 뿌신다",
      content: "two thousand years later...",
      isDone: true,
      edit: false,
    },
  ]);


  return (
    <div>
      {todoItems.map((item)=>
                    item.edit ?(
    			<form
                    className="edit-box"
                    onSubmit={() => saveChangeHandler(item)}
                  >
                    <div>
                      <input
                        type="text"
                        value={getCurrentCard(item.id, editForm).title}
                        onChange={(e) => editTitleHandler(e, item)}
                      />
                    </div>
                    <div>
                      <input
                        type="text"
                        value={getCurrentCard(item.id, editForm).content}
                        onChange={(e) => editContentHandler(e, item)}
                      />
                    </div>
                    <div>
                      <input
                        type="submit"
                        value="save changes"
                        onClick={() => saveChangeHandler(item.id)}
                      />
                    </div>
                  </form>))}
    			</div>
  ):(
                  <div className="list-box">
                    <h3>{item.title}</h3>
                    <div>{item.content}</div>
                    <div>
                      <button onClick={() => deleteTodoHandler(item.id)}>
                        delete
                      </button>
                      <button onClick={() => doneChnageHandler(item.id)}>
                        finish
                      </button>
                      <button onClick={() => showEditInput(item)}>edit</button>
                    </div>
                  </div>
                )
              ) : null
}

export default App

App.js 파일

const [editForm, setEditForm] = useState([]);
const showEditInput = (target) => {
    setEditForm([...editForm, target]);
    const showEdit = todoItems.map((item) =>
      item.id === target.id ? { ...item, edit: !item.edit } : item
    );
    setTodoItems(showEdit);
  };

수정할 항목(카드)를 editForm이라는 State를 이용하여 빈 배열로 선언해준다.
수정 input창으로 변경을 하면서 editForm에 해당 카드의 값들을 배열로 넣어준다.

const getCurrentCard = (id, editForm) =>
    editForm.find((item) => item.id === id);

editForm 안에서 id값을 통해 현재 수정을 하고싶은 카드의 id와 일치하는 배열을 가져온다.

const editTitleHandler = (e, target) => {
    const editedTitle = editForm.map((item) =>
      item.id === target.id ? { ...item, title: e.target.value } : item
    );
    setEditForm(editedTitle);
  };

const editContentHandler = (e, target) => {
    const editedTitle = editForm.map((item) =>
      item.id === target.id ? { ...item, content: e.target.value } : item
    );
    setEditForm(editedTitle);
  };

event와 item을 둘다 불러옴.

const saveChangeHandler = (id) => {
    const newTodos = todoItems.map((item) =>
      item.id === id
        ? {
            ...item,
            title: getCurrentCard(id, editForm).title,
            content: getCurrentCard(id, editForm).content,
            edit: !item.edit,
          }
        : item
    );

    setTodoItems(newTodos);
  };

1. 이런 고민을 하게 된 이유 : 여러 카드의 수정버튼을 눌렀을 때, 수정 창의 내용이 독립적이지 않아서 인풋창의 내용이 계속 겹치는 현상이 발생함.

2. 각 항목의 id값을 어떻게 가져올지 고민하다가, 수정할 항목을 넣어줄 배열을 만들어주면 될 것 같다고 생각하게 됨.