생활코딩

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. 감자순대
    24.05.24
  2. TTimotti
    리액트의 상태는 약간 자바의 DTO클래스와 비슷하군요..
  3. 코딩두
    23.07.17
  4. 어흥
    230710
  5. 엠제이
    11032022
  6. 당당
    2022.09.23
  7. MelonMusk
    08/20
  8. MelonMusk
    08/19
  9. 코딩러버
    진짜 어려운데 설명을 잘해주셔서 이해가 잘돼요!
  10. toonfac
    220704 오전 1시 35분 완료
  11. 테르
    Create 한 4번 5번 title,body 내용은 어디로 가나요??? 어디에 저장 되는 건가요?
  12. MrAHN
    저는 강의를 보기 전에 먼저 코드를 작성해봤는데 topics에 바로 push했습니다. 근데 잘 되었습니다.

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

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

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

    react
    react is ...

    으로 바뀌지 않을겁니다.
    (큰 문제는 아니죠.. 강사님이 설명하시고자 하는대로 안될 뿐)
    대화보기
    • LLLEE
      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 자세히 보기