[React] 실습 / 데이터 수정 / map

개요

React 에서 버튼 이벤트를 통해 데이터를 수정해 보자 !!

toggle State 를 활용 하여 수정 폼을 자유롭게 변경해 보자 !!

배열의 map 함수를 통한 데이터 수정 스킬을 배워 보자 !!

App.js

2022.04.29 - [React] - [React] 실습 / 데이터 추가 / state 끌어올리기 에서 데이터를 추가 해보는 방법을 배웠다.

데이터 수정도 마찬가지로,  데이터 흐름을 이해하고 똑같이 적용해주면 된다.

import { useState, useRef } from "react";
import ReportEditor from "./ReportEditor";
import ReportList from "./ReportList";

const App = () => {
  const [data, setData] = useState([]);
  const dataId = useRef(0);

  const onCreate = (author, content, grade) => {
    const newItem = {
      author,
      content,
      grade,
      id: dataId.current
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  const onDelete = (targetId) => {
    console.log(`${targetId}가 삭제되었습니다`);
    const newReportList = data.filter((it) => it.id !== targetId);
    setData(newReportList);
  };

  const onEdit = (targetId, newContent) => {
    setData(
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it
      )
    );
  };
  return (
    <div className="App">
      <ReportEditor onCreate={onCreate} />
      <ReportList onEdit={onEdit} onDelete={onDelete} reportList={data} />
    </div>
  );
};
export default App;

728x90

ReportList.js / ReportItem.js

import ReportItem from "./ReportItem";

const ReportList = ({ onEdit, onDelete, reportList }) => {
  return (
    <div>
      <h2>보고 리스트</h2>
      {reportList.length}개의 보고가 있습니다.
      <div>
        {reportList.map((it) => {
          return (
            <ReportItem
              key={it.id}
              {...it}
              onDelete={onDelete}
              onEdit={onEdit}
            />
          );
        })}
      </div>
    </div>
  );
};

export default ReportList;

App.js -> ReportList.js 로 onEdit 메소드를 전달

import { useState, useRef } from "react";

const ReportItem = ({ onEdit, onDelete, id, author, content, grade }) => {
  const [isEdit, setIsEdit] = useState(false);
  const [localContent, setLocalContent] = useState(content);
  const localContentInput = useRef();

  const toggleIsEdit = () => {
    setIsEdit(!isEdit);
  };
  const HandleRemove = () => {
    console.log(id);
    if (window.confirm(`${id}번째 보고를 정말 삭제할까요?`)) {
      onDelete(id);
    }
  };
  const HandleContent = (e) => {
    setLocalContent(e.target.value);
  };
  const handleQuitEdit = () => {
    setIsEdit(false);
    setLocalContent(content);
  };
  const handleEdit = () => {
    if (localContent.length < 5) {
      localContentInput.current.focus();
      return;
    }
    if (window.confirm("수정하겠습니까?")) {
      onEdit(id, localContent);
      toggleIsEdit();
    }
  };
  return (
    <div className="ReportItem">
      <div className="info">
        <span>
          작성자 : {author} | 점수 : {grade}{" "}
        </span>
        <div className="content">
          {isEdit ? (
            <textarea
              ref={localContentInput}
              value={localContent}
              onChange={HandleContent}
            />
          ) : (
            content
          )}
        </div>
        {isEdit ? (
          <div>
            <button onClick={handleQuitEdit}>수정 취소</button>
            <button onClick={handleEdit}>수정 완료</button>
          </div>
        ) : (
          <div>
            <button onClick={HandleRemove}>삭제하기</button>
            <button onClick={toggleIsEdit}>수정하기</button>
          </div>
        )}
      </div>
    </div>
  );
};

export default ReportItem;

ReportList.js -> ReportItem.js 로 onEdit 메소드 전달
ReportItem.js 에서 onEdit 메소드 호출 !!

참고

https://espania.tistory.com/356

[React] 실습 / 리스트 조회(rendering)

https://espania.tistory.com/361

[React] 실습 / 데이터 추가 / state 끌어올리기

https://espania.tistory.com/362

[React] 실습 / 데이터 삭제 / filter

https://codesandbox.io/s/lucid-elbakyan-589g2q?file=/src/ReportItem.js