react state

react state

component 내부에서 정보를 전달해서 return 값을 바꿘다.

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 topics = [
    { 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>
  }

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