7일차 - react update

✅react update

update = create + read 

 

컴포넌트의 props -> 사용자가 컴포넌트로 전달한 일종의 명령

 

props -> 사용자가, 외부자가 내부로 전달하는 값

state -> 내부자가 사용하는 데이터 / state는 컴포넌트 안에서 얼마든지 바꿀 수 있다.

 

prop을 state로 바꿔야한다.  / prop은 수정되지 않는다. 

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

 

✅props과 useState 동시에 사용하기

function Update(props) {
  const [title, setTitle] = useState(props.title); 
  # prop에서 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.title.value;
      props.onUpdate(title, body);
  }}>
    <p><input type="text" name="title" placeholder="title" value={title}></input></p>
    # value={props.title}  -> value={title} 로 바뀜 
    <p><textarea name='body' placeholder='title' value=body}></textarea></p>
    <p><input type="submit" value="Update" ></input></p>
  </form>
</article>
  
}

하지만 여전히 form 은 변화하지 않는다. 

value = {title} 과 연결되어 있는 state가 바뀌지 않았기 때문이다. 

 

*onChange() 사용하기 / react onChange는 html onChange와는 다르게 동작한다. 

react에서는 값을 입력할때마다 onChange가 호출된다. 

 

우리가 필요한 것은 값이 입력할때마다 그 값이 무엇이냐가 필요한 것! -> 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.title.value;
      props.onUpdate(title, body);
  }}>
    <p><input type="text" name="title" placeholder="title" value={title} 
    onChange={(event)=>{setTitle(event.target.value);}}
    >    
    // 새로운 값을 입력할때마다 setTitle의 값을 지정하는 것 
      </input></p>
    <p><textarea name='body' placeholder='title' value={body} onChange={(event)=>{
      setBody(event.target.body)
    }}></textarea></p>
    <p><input type="submit" value="Update" ></input></p>
  </form>
</article>
  
}

function App() {
  // const _mode = useState('welcome');
  // const mode = _mode[0];
  // const setMode = _mode[1];
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4);
  const [topics, setTopics] = useState( [
    {id:1 , title:'html', body:'html is ....'},
    {id:2 , title:'css', body:'css is ....'},
    {id:3 , title:'javascript', body:'javascript is ....'},

  ]);
  let content = null;
  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>
  } else if(mode === 'CREATE'){
    content = <Create onCreate={(_title, _body)=>{
        const newTopic = {id:nextId , title:_title, body:_body}
        // topics.push(newTopic); -> x 
        // 결과는 state를 읽을 때 생긴다. 
        const newTopics = [...topics]
        newTopics.push(newTopic);
        setTopics(newTopics);
        setMode('READ'); 
        // mode가 reload될 때 READ로 바뀌는 것 
        setId(nextId);
        setNextId(nextId+1);
    }}></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 updatedTopic = {id:id, title:title, body:body}
        const newTopics = [...topics]
        for(let i = 0; i<newTopics.length; i++ ){
          if(newTopics[i].id === id){
            newTopics[i] = updatedTopic;
            break;
          }
          setTopics(newTopics);
          setMode('READ');

        }
    }}></Update>
  }



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

export default App;

 

content = <Update title={title} body={body} onUpdate={(title,body)=>{ }}></Update>

-> 기존에 쓰여진 title과 body값을 form value 안에 표기하기 위해서  title={title} body={body} 이 코드 필요하다