Create

Create 기능 구현하기

Create버튼을 클릭하면 mode가 create로 바뀌고 해당하는 UI가 표시되도록..!

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

• a태그를 추가하고 onClick의 함수를 적용한다
• 이 때, a태그의 기본 동작을 못하게 하기 위해 event.preventDefault();
• 모드값을 바꾼다. setMode('CREATE')
• mode를 'CREATE'로 바꾸게 되면

const [mode, setMode] = useState('WELCOME');

• mode값이 CREATE로 바뀌고 APP 컴포넌트가 다시 실행되면서 if문에 아무것도 걸리지 않게된다.

else if(mode === 'CREATE'){
    content = <Create></Create>
  }

• else if로 (mode === 'CREATE')라면 바뀔 콘텐트의 변수를 만든다.
• 별도의 컴포넌트 Create를 만든다.

Create컴포넌트

function Create(props){
  return <article>
    <h2>Create</h2>
    <form>
      <p><input type="text" name="title" placeholder='title'/></p>
      <p><textarea name="body" placeholder='body'></textarea></p>
      <p><input type="submit" value="Create"/></p>
    </form>
  </article>
}

• 정보를 서버로 전송할 때 사용하는 form태그 사용
• Create컴포넌트를 이용하는 이용자가 생성버튼을 눌렀을 때 후속작업으로 할 수 있는 interface를 제공한다면 onCreate={()=>{}}의 함수 전달.(사용자가 Create버튼을 눌렀을 때 함수가 실행됨)

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

• Create버튼의 onCreate 함수는 title,body값을 받아야 한다.

  onCreate의 호출

function Create(){
  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"/></p>
    </form>
  </article>
}

• submit버튼을 클릭했을 때 js가 실행되는 타이밍은 form태그에 onSubmit이라는 prop을 제공하는 것.
• onSubmit은 submit버튼을 클릭했을 때 form태그에서 발생하는 이벤트
• event함수 안에서 form태그에 소속된 name이 title, body인 태그에 value값을 얻어야한다.
• const title = event.target.title.value; title의 값
• const body = event.target.body.value; .body의 값
• 가져온 title,body를 Create컴포넌트 사용자에게 공급
• 사용자는 onCreate를 통해 submit정보를 공급받는다. (props)

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"/></p>
    </form>
  </article>
}

• Create컴포넌트에 (props) props.onCreate();를 통해 onCreate함수 호출!
• 이후 topics에 새로운 객체 추가

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

• useState활용 (읽기,쓰기)