[생활코딩/React] 2022개정판 | 9. update

참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 

1.  update 기능을 만들어보자!

---

update 버튼을 만들어보자!

---

상세 글을 클릭했을 때 update버튼이 나오게 할 것이다.

function App() {
  ...중략...

  let content = null;
  let contextControl = null;
  if (mode === "WELCOME") {...}
  else if (mode === "READ") {
    ...중략...
    contextControl = <li><a href={'/update' + id} onClick={event=>{
      event.preventDefault();
      setMode('UPDATE');
    }}>update</a></li>
  } else if (mode === "CREATE") {...}
  
  return (
    <div>
      ...중략...
      
      <ul>
        <li><a href='/create' onClick={event=>{
          event.preventDefault();
          setMode("CREATE");
        }}>Create</a></li>
        {contextControl}
      </ul>
    </div>
  );
}

👉🏻상세글을 클릭했을 때만 update 버튼이 나오도록 할 것이기 때문이므로 mode가 READ일 경우의 코드를 수정해준다.

• mode가 READ일 때 li tag로 update 버튼을 만들어 contextControl 변수에 담는다.
  • update 버튼을 누르면 mode를 UPDATE로 바꿔준다.
• return해준다

리스트 상세보기일 때만 update 버튼이 나옴!

function App() {
  ...중략...
  
  if (mode === "WELCOME") {...}
  else if (mode === "READ") {...}
  else if (mode === "CREATE") {...}
  else if (mode === "UPDATE") {
    let title, body = null;
    for(let i = 0; i < topics.length; i++){
      if(topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Update title={title} body={body} onUpdate={(title, body)=>{
      const newTopics = [...topics]
      const updatedTopic = {id : id, title : title, body : body}
      for(let i = 0; i < newTopics.length; i++){
        if(newTopics[i].id === id) {
          newTopics[i] = updatedTopic;
          break;
        }
      }
      setTopics(newTopics);
      setMode("READ");
    }}></Update>
  }


  return (...)
}

👉🏻mode가 UPDATE로 변할 경우 코드를 짜준다.

• for문을 돌려서 클릭한 리스트의 title과 body를 저장한다.
• Update 컴포넌트의 props로 title과 body를 넘겨준다.
• 함수 onUpdate도 props로 넘겨준다.
  • topics를 복제한 리스트 newTopics를 만들어준다.
  • update form에 넣을 내용 updatedTopic 객체를 만들어준다.
  • id값을 비교해 해당하는 리스트를 updatedTopic 객체로 변경 해준다.
  • topics를 newTopics로 setTopics를 이용해 변경하고 mode도 setMode로 READ로 변경한다.

function Update(props) {
  const [title, setTitle] = useState(props.title);
  const [body, setBody] = useState(props.body);
  return (
    <article>
      <h2>Update</h2>
      <form onSubmit={event=>{
        event.preventDefault();
        const title = event.target.title.value;
        const body = event.target.body.value;
        props.onUpdate(title, body); 
      }}>
        <p><input type="text" name="title" placeholder="title" value={title} onChange={event=>{
          setTitle(event.target.value);
        }}></input></p>
        <p><textarea name="body" placeholder='body' value={body} onChange={event=>{
          setBody(event.target.value);
        }}></textarea></p>
        <p><input type="submit" value="Update"></input></p>
      </form>
    </article>
  )
}

👉🏻Update 컴포넌트를 다음과 같이 만들어준다.

무사히 수정된 모습!