7강. Create

CRUD(Create Read Update Delete)중에서 Read까지 진행했다.

이번에는 Create를 진행해보도록 하겠다.

 

생성을 하기 위해서는 Create 태그가 필요할 것이다.

... 생략 ...

  return (
    <div className="App">
    
	...	생략 ...
      
      <a href="/create" onClick={event => {
        event.preventDefault();
        setMode('CREATE');
      }}>Create</a>
    </div>
  );
}

export default App;

다음과 같이 Create가 작동하는 태그를 작성하였다.

기본으로 동작하는 a태그의 기능을 막고 mode 를 CREATE를 집어 넣는다.

 

... 생략 ...

function App() {
  // const _mode = useState('WELCOME');
  // console.log("mode: ",mode);
  // console.log("setMode: ",setMode);

  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 ...'}
  ]);

... 생략 ...

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

  ... 생략 ...

먼저 기존의 topics를 useState로 묶는다.

그 이유는 생성으로 인해 topics에 새로만든 내용을 추가하기 위함이다.

 

그리고 topics에는 각 고유한 ID를 가지고 있다.

때문에 nextId를 추가 시켜 새로운 글이 생성될때 id를 집어 넣어 줄것이다.

그렇게 다음과 같은 코드가 탄생하게 되었다.

  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 ...'}
  ]);

다음은 else if 문이다.

만약 mode가 CREATE라는 값으로 세팅되어 있다면 조건문에 들어오게 된다.

 

onCreate를 통해 새로 생성된다면(아직 상위 컴포넌트는 작성하지 않았다. - 밑에서 작성할 예정이다.), newTopic에 작성된 title과 body가 저장된다.

기존 topics에 있던 값들은 newTopics에 저장한다.

그러면 newTopics 형식은 아래와 같아질 것 이다.

newTopics

[
    {id:1 , title:'html', body:'html is ...'},
    {id:2 , title:'css', body:'css is ...'},
    {id:3 , title:'javascript', body:'javascript is ...'}
]

여기에 아까 작성한 newTopic을 push를 통해 넣어준다

그러면 newTopics는 다시 다음과 같아진다.

 

newTopics

[
    {id:1 , title:'html', body:'html is ...'},
    {id:2 , title:'css', body:'css is ...'},
    {id:3 , title:'javascript', body:'javascript is ...'}
    {id:4 , title: 작성한 제목, body: 작성한 내용}
]

 

 

이것을 setTopics에 넣어줌으로써 기존의 topics를 새로 작성한 topics로 바꿔주고 재랜더링을 진행한다.

 

그리고 생성된 글을 읽어주기 위해 mode를 READ로 바꾸어 주고, id를 설정한다.

마지막으로 다음에 생성될 id를 위해 nextId를 1 증가 시키며 끝내준다.

 

 

이제 값을 입력 받을 CREATE상위 컴포넌트가 필요하다.

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

 form을 통해 생성을 한다.

먼저 form이벤트의 고유한 기능을 막기 위해서 preventDefalut()를 작성해준다.

title값과 body값을 태그에서 변경된 value를 받는다.

event.target은 변경된 태그를 말한다.

 

다시말해서 

      <p><input type="text" name="title" placeholder="title"/></p>
      <p><textarea name="body" placeholder="body"></textarea></p>
      <p><input type="submit" value="Create" /></p>

여기서 작성한 것들을 제출하면

      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onCreate(title,body);

여기서 값을 넣어 onCreate로 보낸다.

 

onCreate는 

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

여기서 사용했다.

 

이 작업이 끝나면 

다음과 같이 글이 생성되는 것을 알 수 있다.

https://github.com/denist2322/youtube_react/commit/69ebe5edcff2551e9e33675bc1a6d069c5ecf547

7강 CREATE · denist2322/youtube_react@69ebe5e