React ) state

props는 하위컴퍼넌트로 값을 전달하는 방법, state는 한 컴퍼넌트안에서 값을 전달하는방법

 

app내에 변수값은 최초 콜 시에만 인지하고 변경된 값은 인지하지못한다.

그래서 변화되는 값을 추적하기위해 useState를 사용한다.

useState는 배열을 리턴하는데 0번째 데이터는 값, 1번째 데이터는 값을 변경하는 함수를 가진다.

보통 함수는 변수명, set어쩌고 로 받는다.

 

 

 

 

 

위의 코드에서 기존의 topics를 복제하여 복제된 변수에 새로운 객체를 추가하고 그 객체를 setTopics로 변경해주었는데 그렇게해야 변경이된다. topics는읽기속성이기 때문에 읽기속성에 puch를 때려봤자이기도하고 useState의 경우 원래 값과 변경함수를 사용하여 변경한 값이 같으면 다시 로드를 안하기 때문이다.

import { useState } from 'react';
import './App.css';
function Header(props){
  return <header>
    <h1><a href='/' onClick={event=>{
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}
function Nav(props){
  //console.log(props)
  const lis = [];
  for(let i=0; i<props.topics.length; i++){
    let t = props.topics[i];
    lis.push(<li key={t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
        event.preventDefault();
        props.onChangeMode(Number(event.target.id));
      }}>{t.title}</a>
      </li>)
  }
  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}
function Article(props){
  console.log(props)
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}

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'></input></p>
      <p><textarea name="body" placeholder='body'></textarea></p>
      <p><input type='submit' value='Create'></input></p>
    </form>
  </article>
}

function App() {
  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;
  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++){
      //console.log(topics[i].id)
      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);
      setMode('READ');
      setId(nextId);
      setNextId(nextId+1);
    }}></Create>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode("WELCOME");
      }}></Header>
      <Nav topics={topics} onChangeMode={(_id)=>{
        setMode("READ");
        setId(_id);
      }}></Nav>
      {content}
      <a href='/create' onClick={(event)=>{
        event.preventDefault();
        setMode("CREATE");
      }}>CREATE</a>
    </div>
  );
}

export default App;