8. UPDATE

https://www.youtube.com/watch?v=bW_WOrYzVWw&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=9

C R U D에서 U를 구현할 시간이다.

U는 C와 R을 합친 것이다. 그래서 C와 R코드를 참조하면 쉽게 만들 수 있다.

 

일단 update 링크를 'READ' 모드일 때 나타나게 한다.

eles if (mode === 'READ')
//...
contextControl = <li><a href={'/update/'+id} onClick={event=>{
      event.preventDefault();
      setMode('UPDATE');
    }}>Update</a></li>
//...
<ul>
    <li>
      <a href='/create' onClick={event=>{
        event.preventDefault();
        setMode('CREATE');
      }}>Create</a>
    </li>
    {contextControl}
</ul>

mode가 'UPDATE'일 때 동작하는 부분을 만들어준다.

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)=>{
      console.log(_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>
  }

mode가 READ일 때의 for문을 그대로 복사 붙여넣기하고, content를 구성한다.

선택한 요소의 id값을 비교해서 title과 body를 가져온 다음 Update 함수의 title과 body로 넘겨준다.

Create와 마찬가지로 onUpdate함수를 만들고 파라미터로 title과 body를 가지게 한다.

 

function Update(props) {
  const [title, setTitle] = useState(props.title) //props를 state로 변경
  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=>{ //입력할 때마다 value값을 바꿔줌
      setTitle(event.target.value);
    }}/></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>
}

Create 함수를 복사 붙여넣기해서 Update 함수를 만들어준다.

Update 함수에서 input값은 원래 값을 가져와야한다. 그렇게 하기 위해서 각 태그의 value 값을 title과 body로 바꿔준다.

하지만 바로 값을 넣으면 그 값이 변하지 않는다.

이를 해결하기 위해서 props를 state로 변경해주어야한다.

const [title, setTitle] = useState(props.title) //props를 state로 변경
const [body, setBody] = useState(props.body)

그리고 각각 태그에 onChange 함수를 이용해서 title과 body를 변경한 값으로 바꿔준다.

 

변경한 값을 반영하기 위해서 create에서 한 것처럼 newTopics를 만들어서 수정한 값을 세팅해주면 된다.

 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>