Update

Update 구현하기

CREATE + READ
update를 통해 내용 수정하기

  let contextControl = null;
  if(mode === 'WELCOME'){
    content = <Article title="Welcome" body="Hello, WEB"></Article>
  }else if(mode === 'READ'){
    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 = <Article title={title} body={body}></Article>
    contextControl = <li> <a href={"/update"+id} onClick={event=>{
      event.preventDefault();
      setMode('UPDATE');
    }}>Update</a> </li>
  }

• let contextControl = null; 변수를 지정하고 이 변수는 mode === "READ"일 때 나타난다.

  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode('WELCOME');
      }}></Header>
      <Nav topics={topics} onChangeMode={(_id)=>{
        setMode('READ');
        setId(_id);
      }}></Nav>
      {content}
      <ul>
        <li>
          <a href="/creat" onClick={event=>{
            event.preventDefault();
            setMode('CREATE');
          }}>Create</a>
        </li>
        {contextControl}
      </ul>
    </div>
  );
}

• 변수 contextControl을 {contextControl}
• 목록의 상세보기를 클릭하면 해당 contextControl 표시.

Update 이벤트

    content = <Article title={title} body={body}></Article>
    contextControl = <li> <a href={"/update"+id} onClick={event=>{
      event.preventDefault();
      setMode('UPDATE');
    }}>Update</a> </li>

• update에 id값을 추가하고 onClick으로 이벤트함수
• setMode('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></Update>
  }

• (mode === 'UPDATE')의 경우
• Update컴포넌트를 출력

Update 컴포넌트

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);
  }}>
</article>
}

• props를 지정한다.
• Update의 컴포넌트에 onUpdate에 props을 전달해야 한다.

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>
  }
  }

• onUpdate는 title,body의 값을 전달 받는 함수 지정.
• Update 컴포넌트가 기존의 내용을 갖고 있어야 하므로 title={} body={}
• for문을 이용해 title,body의 값을 적용한다.

Props을 State로 전환하기

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=>{
      console.log(event.target.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"/></p>
  </form>
</article>
}

• const [title, setTitle] = useState(props.title); title값
• const [body, setBody] = useState(props.body); body값
• onChange={}의 이벤트 사용!
• setTitle(event.target.value);을 사용하여 변경된 값을 새로운 title값으로 적용시킨다.

정리

• props로 들어온 title에서 state로 환승
• state에 value값 적용
• onChange를 통해 새로운 value로 키워드를 입력할 때마다 setTitle의 값을 지정
• title의 값이 바뀌고 컴포넌트가 렌더링되면서 새로운 값이 value값으로 .. 순환