react create

function Create(props) {
  return <article>
    <h2>
      Create
    </h2>
    <form onSubmit={event => {
      event.preventDefault();//원래 함수의 실행을 막음 페이지 리로드를 막음
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onCreate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title" /></p>
      <p><textarea name="body" placeholder="body"></textarea></p>
      <p><input type="submit" value="Create"></input></p>
    </form>
  </article>
}

function App() {

  // const _mode = useState("WELCOME");
  // const mode = _mode[0];
  // const setMode = _mode[1]

  const [mode, setMode] = useState("WELCOME"); // 위에 3줄을 한번에 줄임
  //useState가 반환하는 객체의 값음 _mode 배열인데 이 배열안의 1원소는 파라미터로 전달한 값이다
  // 그리고 두번째 원소는 이상태를 설정하는 메소드가 전달이 된다.
  //그리고 이름은 변경이 가능함

  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4);

  const [topics, setTopics] = useState([
    { id: 1, title: 'new list', body: 'html is ...' },
    { id: 2, title: 'new list2', body: 'css is ...' },
    { id: 3, title: 'new list3', body: 'javascript is ...' },
  ]);


  let content = null;
  if (mode === 'WELCOME') {
    content = <Article title="WELCOME" body="WELCOME all is well"></Article>

  } else if (mode === 'READ') {
    let title, body = null;//자바 스크립트에서 한번에 선언해서 사용함 변수 둘다 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>
  } else if (mode === 'CREATE') {
    content = <Create onCreate={(_title, _body) => {
      const newTopic = { id: nextId, title: _title, body: _body }
      const newTopics = [...topics]//복제본 생성함
      newTopics.push(newTopic);
      setTopics(newTopics);//복제본을 생성해서 다시 넣어 새롭게 넣어주어야 다시 랜더링됨.
    }}></Create>
  }

  return (
    <div className="App">
      <header className="App-header">

        <Header title="all is well" onChangeMode={function () {
          alert('Header hihi');//함수를  태그 내부에 만들어서 전달함
          mode = "WELCOME";
        }}></Header>

        <Header></Header>

        <Fuck topics={topics} onChangeMode={(_id) => {
          setMode("READ");
          alert(_id);
          setId(_id);  //onChangeMode()안에서 setStat가 일어나게 만든다.
        }}></Fuck>

        {content}
        <a href="/create" onClick={event => {
          event.preventDefault();
          setMode('CREATE');
        }
        }>Create</a>
      </header>
    </div>
  );
}

사용자 인터페이스에서 새로운nav를 추가하는 create를 학습함 여기서 포인트는 setState()에서 들어가는게 기본 타입이 아니고 사용자가 정의하거나 obj라면 ... 을 사용해서 복제후에 다시 복제본을 수정해서 다시 상태를 정의 해주어야 새롭게 랜더링 된다.