[react] Update

CRUD의 Update에 대해서 알아보자

Update

📌
📍 react의 update 기능은 수정 기능이다.
1. form에 작성한 내용을 수정 해보자.
2. 필요한 데이터 : 내가 기존에 작성한 데이터 (title, body)
필요한 event : 내가 수정 후 눌렀을 때 수정된 데이터로 (title, body) 변경되어야함
3. Create()에 있는 props.onCreate()는 내가 form에서 작성한 데이터를 props으로 보낸다.
Update()는 해당 props로 받는 데이터를 복사, 해당 복사된 데이터를 수정, 수정 데이터를 props로 다시 보낸다.

📌코드

//create
function Create(props) {
  return (
    <article>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          const title = event.target.title.value; 
          const body = event.target.body.value;
          props.onCreate(title, body);
        }}
      >
      // 생략
      </form>
    </article>
  );
}

//update
function Update(props) {
  const [title, setTitle] = useState(props.title);
  const [body, setBody] = useState(props.title);
  return (
    <article
      <form
        onSubmit={(event) => {
          event.preventDefault();
          const title = event.target.title.value;
          const body = event.target.body.value;
          props.onUpdate(title, body);
        }}
      >
     // 생략
      </form>
    </article>
  );
}

//app

function App() {

  const [mode, setMode] = useState("welcome");
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4); 
  const [list, setList] = useState([
    { id: 1, title: "one", body: "첫번째" },
    { id: 2, title: "two", body: "두번째" },
    { id: 3, title: "three", body: "세번째" },
  ]);
  let content = null; 
  let contextControl = null; 
 if (mode === "READ") {
    //생략
    content = <Article title={title} body={body}></Article>;
    contextControl = (
      <> // react에서는 감싸줘야하는데 ul 태그를 사용하기보단 <>태그로 감싸면 감싸져서 나옴
        <li>
          <a
            href={"/update" + id}
            onClick={(event) => {
              event.preventDefault();
              setMode("UPDATE"); // READ MODE는 이미 작성 후에 보이는 페이지
              //링크는 update+id mode는 UPDATE로 변경해줘야한다. 
            }}
          >
            update
          </a>
        </li>
      </>
    );
  } else if (mode === "CREATE") {
    // 위에서 사용 하는 mode
    content = (
      <Create
        onCreate={(title, body) => {
          const newList = { id: nextId, title: title, body: body };
          const newListCopy = [...list];
          newListCopy.push(newList);
          setList(newListCopy);
          setMode("READ");
          setId(nextId);
          setNextId(nextId + 1);
        }}
      ></Create>
    );
  } else if (mode === "UPDATE") { 
    // mode가 UPDATE인 경우
    let title,body = null;
    for (let i = 0; i < list.length; i++) {
      if (list[i].id === id) { // list.id === create에서 만들어진 id
        title = list[i].title; // 기존 title: const title = event.target.title.value; 
        body = list[i].body; // 기존 body: const title = event.target.title.value; 
          
      }
    }
    content = (
      <Update
        title={title}
        body={body}
        onUpdate={(title, body) => {
          const newList = [...list]; // 배열 복사
          const updatedList = { id: id, title: title, body: body }; // list에 들어갈 배열 요소
          for (let i = 0; i < newList.length; i++) {
            if (newList[i].id === id) {
              newList[i] = updatedList;  //id 값에 맞춰서 배열에 새로운 데이터 담기
              break;
            }
          }
          setList(newList); // 리스트 새로고침
          setMode("READ"); //변경 후 변경된 데이터가 올라간 페이지 = READ 
        }}
      ></Update>
    );
  }
}