생활코딩

Coding Everybody

코스 전체목록

닫기

생성 기능 구현

강의소개

정보를 생성하는 방법을 소개합니다. 

 

 

 

강의

 

 

 

소스코드

변경점

import {useState} from 'react';

function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
function Header(props){
  return <header>
    <h1><a href="/" onClick={(event)=>{
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}
function Nav(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 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, 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>
  }
  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;

 

 

 

 

라이브 데모

 

댓글

댓글 본문
  1. 당당
    2022.09.23
  2. MelonMusk
    08/20
  3. MelonMusk
    08/19
  4. 코딩러버
    진짜 어려운데 설명을 잘해주셔서 이해가 잘돼요!
  5. toonfac
    220704 오전 1시 35분 완료
  6. 테르
    Create 한 4번 5번 title,body 내용은 어디로 가나요??? 어디에 저장 되는 건가요?
  7. 저는 강의를 보기 전에 먼저 코드를 작성해봤는데 topics에 바로 push했습니다. 근데 잘 되었습니다.

    topics.push({"id" : nextId , "title" : _title , "body" : _body});

    이렇게 하면 안 되는 이유가 궁금합니다.
    useState과 관련이 있을까요? useState를 쓰면 그냥 push해도 되고, useState를 안 쓰면 오류가 나네요
  8. 2022.04.19 완료
  9. 고통받는티모
    setId(nextId) 를 추가한 이유는
    예를 들어서 우리가 react, react is ... 입력하고 submit 버튼을 누르면, <Nav>태그에 4. react가 새로 생길건데, 해당 버튼을 눌렀을 때 페이지로 새로 렌더링(새로고침)하기 위함입니다.

    setId(nextId)를 안하시고, setMode('READ')만 하시면,
    id 값은 바뀌기 않았기 때문에, 기존 id값인 상태 그대로기때문에, 새로 렌더링되지 않고, 이번 시간에 새로 적은
    {content} 부분이 바뀌지 않기 때문에,

    react
    react is ...

    으로 바뀌지 않을겁니다.
    (큰 문제는 아니죠.. 강사님이 설명하시고자 하는대로 안될 뿐)
    대화보기
    • content = <Create onCreate={(_title, _body)=>{
      const newTopic ={id:nextId, title:_title, body:_body}
      const newTopics = [...topics];
      newTopics.push(newTopic);
      setTopics(newTopics);
      setMode('READ');
      setNextId(nextId + 1);
      }}></Create>;

      강의랑 다르게 setId(nextId); 를 추가 안 했는데 문제가 따로 없는데...
      setId(nextId) 왜 있는 건지 잘 이해가 안되네요... 왜 그런 걸까요?...
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기